flex布局总结(新版本) ​

介绍 ​

看新版本之前,可以去看看我之前发布的老版本里轴和富裕空间的概念,如果已经了解可以跳过.

flex布局总结-老版本

新版本flex只支持IE10及以上.安卓4.4及以上

容器的属性 ​

先看看新版本布局:

<style>
#wrap{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    margin: 50px auto;
    display: flex; /* 新版本flex */
}
.box{
    width: 50px;
    height: 50px;
    background: red;
    text-align: center;
    line-height: 50px;
}
</style>
<div id="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

1.flex-direction ​

同时控制主轴是哪一根和主轴的方向

row 主轴是 X轴 , colum 主轴是 Y轴 ,

row-reverse 和colum-reverse 分别代表主轴是X轴反方向、主轴是X轴反方向。

看看 row-reverse 的效果:

我们发现: 新版本的富裕空间和老版本的有所差异,老版本的富裕空间不会随着轴的方向改变而改变,新版本的富裕空间默认在轴的正方向

2.justify-content ​

控制新版本的主轴富裕空间,相当于老版本flex中的 -webkit-box-pack ;

flex-start 富裕空间在主轴的正方向; flex-end 富裕空间在主轴的负方向; center 富裕空间在主轴的两边; space-between 富裕空间在所有项目之间; space-around 富裕空间平均分配在所有项目两边.再在 #wrap 上添加 justify-content: space-between; :

3.align-items ​

控制新版本的侧轴富裕空间,相当于老版本的-webkit-box-align

flex-start 富裕空间在侧轴的正方向; flex-end 富裕空间在侧轴的负方向; center 富裕空间在侧轴的两边; baseline 按基线对齐; stretch 等高布局(在项目没有设置高度时).再在 #wrap 上添加 align-items: center; :

项目的属性 ​

flex-grow ​

将主轴上的富裕空间按比例分配到项目的width/height上,相当于老版本flex中的 -webkit-box-flex

在项目中添加 flex-grow:1; 这里主轴富裕空间一共有300-50*4= 100 px ;一共有4个项目则每个项目分 1/4 即 100*(1/4)= 25 px ,最终项目占的位置为 50+25=75 px ,看看效果:

项目分配了 主轴富裕空间 所以占满了主轴.

也可以单独给一个项目设置更多的比例,在css中添加

#wrap> .box:nth-child(1){
    flex-grow: 7;
}

这样第一个 .box 占了主轴富裕空间的 7/10 (一共把富裕空间分成了10分,第一个项目占七份,其它的各占一份) ,最终第一个项目占的位置为 50+100*(7/10)= 120 px , 其它的项目占的位置为 50+100*(1/10)=60 px 看看效果:

其它属性 ​

容器新增的属性有 flex-wrap 、align-content 、flex-flow

项目新增的属性有 order 、align-self 、flex-shrink、flex-basis、flex

详情参考MDN文档