在以往的□□□大多数网□□页布局中，经常要用□□到浮动或●定位、居中，为了实现□□这些效果，我们通常□□会用到CSS中 display属性 + position属性 + float属性来完□□成，但对于某□□些布局非□□□□常不方便，往往花费♦不必要的□□时间而达□□□不到想要□□的效果，CSS3中新特性display: flex的出现，使我们能□□□□节省时间□□和优化代□□码，并实现各□□种页面简□□单快速布◤局。Flex是Flexible Box的缩写，意为"弹性布局"，它的强大□□□之处在为□□盒状模型□□□提供最大□□□□的灵活性。而且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，则表示不✦缩小。

作者：BG大游集团严成