服务热线 400-660-8066
重庆网站建设
此文由深圳网站建设企业中企动力小编撰写，转载请注明出处。有需要深圳网站建设，高端网站建设，营销型网站建设，企业网站建设，品牌网站建设，以及平面广告设计服务的，请联系中企动力深圳网站建设公司。
对于Display布局想必大家都有所了解，这个属性用于定义建立布局时元素生成的显示框类型。对于HTML等文档类型，如果使用display不谨慎会很危险，因为可能违反HTML中已经定义的显示层次结构。对于XML，由于XML没有内置的这种层次结构，所有display是必要的。今天我们给大家分享一下网站建设中的Display简单快速布局：
在以往的大多数网页布局中，经常要用到浮动或定位、居中，为了实现这些效果，我们通常会用到CSS中display属性+position属性+float属性来完成，但对于某些布局非常不方便，往往花费不必要的时间而达不到想要的效果，CSS3中新特性display：flex的出现，使我们能节省时间和优化代码，并实现各种页面简单快速布局。Flex是FlexibleBox的缩写，意为弹性布局，它的强大之处在为盒状模型提供更大的灵活性。而且display：flex兼容大多数主流浏览器，有些浏览器使用时需要加上前缀，比如Webkit内核的浏览器，必须加上-webkit前缀。
在使用display：flex布局父元素容器为指定弹性盒子时，只需在父元素中设置：display：flex;而父元素中所包含的子元素的属性float、clear和vertical-align是没有效果的;而行内元素容器弹性盒子设置为display：inline-flex;弹性盒子有两条轴，水平的主轴(横轴)和垂直的交叉轴(纵轴)。默认横轴为主轴，默认自左向右;纵轴为辅轴，默认自上而下。
在设置了display：flex的父元素上，常常会用到的有关弹性布局的属性主要有flex-direction，flex-wrap，justify-content，align-items，align-content，这几个属性分别从主轴的方向、是否换行、子元素在主轴上的对齐方式、子元素在交叉轴上的对齐方式、子元素在多根轴线上的对齐方式来规定了子元素在父元素中的弹性，从而来达到所想实现的效果。
在定义了父元素为弹性盒子后子元素所拥有的属性都有：order，flex-grow，flex-shrink，flex-basis，align-self。order规定了子元素出现的排列循序，值越小，排列越靠前，默认为0;flex-grow定义了子元素的放大比例，默认为0，表示即使父元素还有剩余空间也不放大该子元素。设父元素的宽度为500px，三个子元素宽度分别为100px，如果所有子元素的flex-grow的值为1，则如果父元素有剩余空间，子元素会等比例放大，即剩余出来的200/3分给三个子元素;如果是一个子元素flex-grow为1，一个为2，第三个为3，则三个子元素分别多分到，200*(1/6)，200*(2/6)，200*(3/6);flex-shrink定义了子元素的缩小比例，默认为1，当父元素空间不足时，如果各个条目的flex-shrink值均为1，则表明等比例缩小，如果为0，则表示不缩小。
此文由中企动力小编撰写，转载请注明出处。有需要深圳网站建设，高端网站建设，营销型网站建设，企业网站建设，品牌网站建设，以及平面广告设计服务的，请联系中企动力公司。
添加动力小姐姐微信
电话咨询
400-660-8066
