flex布局

一.概念

是Flexible Box的缩写，即为“弹性布局”，用来为盒装模型提供最大的灵活性。

二.内容

父组件属性

1.flex-direction:决定主轴的方向，有四个值：

（1）row:从左到右

.box{

display:flex;

text-align:center;

flex-direction:row;

}

flex-direction：row

（2）row-reverse：从右到左

.box{

display:flex;

text-align:center;

flex-direction:row-reverse;

}

flex-direction:row-reverse

(3)column：从上到下

.box{

display:flex;

text-align:center;

flex-direction:column;

}

flex-direction:column

(4)column-reverse：从下到上

.box{

display:flex;

text-align:center;

flex-direction:column-reverse;

}

flex-direction:column-reverse

2.flex-wrap:如果一条轴线排不下，如何换行。

(1)nowrap：不换行

.box{

display:flex;

text-align:center;

wrap:nowrap;

}

flex-wrap:nowrap

(2)wrap:换行

.box{

display:flex;

text-align:center;

wrap:wrap;

}

flex-wrap:wrap

（3）wrap-reverse:第二行在下方

.box{

display:flex;

text-align:center;

wrap:wrap-reverse;

}

flex-wrap:wrap-reverse

3.justify-content:定义了项目在主轴上的对齐方式

(1)flex-start:左对齐

.box{

display:flex;

width:100%;

justify-content:flex-start;

}

justify-content:flex-start

（2）flex-end:右对齐

.box{

display:flex;

width:100%;

justify-content:flex-end;

}

justify-content:flex-end

（3）center:居中

.box{

display:flex;

width:100%;

justify-content:center;

}

justify-content:center

(4)space-around:两端对齐

.box{

display:flex;

width:100%;

justify-content:space-between;

}

justify-content:space-between

（5）space-around:每个项目两侧间隔相等

.box{

display:flex;

width:100%;

justify-content:space-around;

}

justify-content:space-around

4.align-items:定义项目在交叉轴上如何对齐

(1)flex-start:与交叉轴的起点对齐

.box{

display:flex;

align-items:flex-start;

}

align-items:flex-start

（2）flex-end:与交叉轴的终点对齐

.box{

display:flex;

align-items:flex-end;

}

align-items:flex-end

（3）flex-end:与交叉轴的中点对齐

.box{

display:flex;

align-items:center;

}

align-items:center

（4）baseline:项目的第一行文字的基线对齐

.box{

display:flex;

align-items:baseline;

}

align-items:baseline

（5）stretch:如果项目未设置高度或设为auto，将占满整个容器的高度

.box{

display:flex;

align-items:stretch;

}

align-items:stretch

5.align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

(1)flex-start:与交叉轴的起点对齐

.box{

background:#CAFF70;

height:600px;

width:500px;

display:flex;

flex-direction:row;

flex-wrap:wrap;

align-content:flex-start;

}

align-content:flex-start

(2)flex-end:与交叉轴的终点对齐

align-content:flex-end

（3）center：与交叉轴的中点对齐

align-content:center

（4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

align-content:space-between

（5）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

align-content:space-around

（6）stretch（默认值）：轴线占满整个交叉轴

align-content:stretch

项目的属性

1.flex-grow:定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。

.box{

display:flex;

flex-direction:row;

flex-grow:1;

flex-wrap:wrap;

}

.div1{

background:#E066FF;

margin:10px;

font-size:60px;

flex-grow:5;

}

.div2{

background:#BBFFFF;

margin:10px;

font-size:60px;

}

.div3{

background:#F08080;

margin:10px;

font-size:120px;

flex-grow:4;

}

.div4{

background:#FFC1C1;

margin:10px;

font-size:60px;

}

.div5{

background:#8F8F8F;

margin:10px;

font-size:60px;

flex-grow:3;

}

flex-grow

2.align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

参考资料：https://www.jianshu.com/p/4290522e1560