详细介绍弹性盒模型（display：flex）

Posted 2020-09-04 上善若水

弹性盒模型，即Flexbox，是css3中的新特性，其实弹性盒模型的原身是dispaly：box；这里，我们暂时不考虑旧的，我们只看新的。

为容器指定弹性盒子，只需在父元素（也就是容器）中设置：display：flex；（注意，webkit内核的需要加webkit前缀，行内元素设置弹性盒子的话，设置display：inline-flex；而且，设置了弹性盒子，子元素的float，clear，vertical属性都将失效）。

弹性盒子默认有两条轴，横轴和纵轴，默认横轴为主轴（默认自左向右）纵轴为辅轴（默认自上而下）。设置了display：flex的容器（也就是父元素）的属性有：flex-direction、flex-wrap，justify-content，flex-flow，align-items，align-content；

其中：flex-direction决定了主轴的方向，其值有：row（默认值，自左向右）/row-reverse（自右向左）/column（主轴为垂直的，自上而下）/column-reverse（自下而上）。

flex-wrap定义一排容不下的时候是否换行，默认为nowrap不换行（一行容不下时，各条目的宽度会按比例缩小）。wrap为正常换行。wrap-reverse是换行时第一行跑到了下面，第二行跑到了上面（暂时还没想好如何描述更清楚）。

flex-flow是flex-direction和flex-wrap的合并写法。默认为row nowrap。

justify-content定义了条目在主轴上的排列方式：有左对齐flex-start（默认值），右对齐flex-end，居中对齐center，两端对齐space-between，等分space-around即每个条目两端的空隙相等。

align-item定义了条目在纵轴上的排列方式：有顶部对齐flex-start，底部对齐flex-end，居中对齐center，strecth（默认值，如果条目不设置具体数值的高度，则高度会沾满整个父元素的高度），baseline，以条目里的第一行文字的基线为准。

align-content定义了多跟轴线时，条目的在纵轴的对齐方式，如果只有一根主轴线则该属性不起作用。值和justify-content的值是一样的。

 

说完容器（也就是父元素）所拥有的属性，该来说说容器中的条目（也就是子元素）所用有的属性了，不能父亲一手遮天，我们崇尚自由民主，所以，父亲有属性，孩子也有属性。

孩子的属性都有：order，flex-grow，flex-shrink，flex-basis，（flex），align-self。

order定义了子元素出现的排列先后，值越小，排列越靠前，默认为0。

flex-grow（看到grow我们就应该联想到变大）定义了子元素的放大比例，默认为0，表示即使父元素还有剩余空间也不放大该子元素。设父元素的宽度为700px，三个子元素宽度分别为200px，如果所有子元素的flex-grow的值为1，则如果父元素有剩余空间，子元素会等比例放大，即剩余出来的100/3分给三个孩子；如果是一个子元素flex-grow为1，一个为2，第三个为3，则三个子元素分别多分到，100*（1/6），100*（2/6），100*（3/6）。

flex-shrink（看到shrink，我们就赢联想到变小）定义了子元素的缩小比例，默认为1，当容器空间不足时，如果各个条目的flex-shrink值均为1，则表明等比例缩小，如果为0，则表示不缩小。

剩余的几个条目属性我们稍后再说。。