重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

Posted 2021-01-05 huangqiming

1、flex，主要就是按比例分配。（例如：两个div的flex:1，就大小相等）

.box1{
    flex:1;
    background-color: red;
}
.box2{
    flex:1;
    background-color: blue;
}

2、flex-direction，几种排序的方式。

row: child水平方向排列
column: child竖直方向排列(默认)
row-reverse: child水平方向反向排列
column-reverse: child竖直方向反向排列

3、justify-content，几种横向内容排序的方式。

flex-start: child对齐主轴的起点(默认)
flex-end: child对齐主轴的终点
center: child居中对齐主轴
space-between: child在主轴方向相邻child等间距对齐，首尾child与父容器对齐
space-around: child在主轴方向相邻child等间距对齐，首尾child与父容器的间距相等且为相邻child间距的一半
space-evenly: child在主轴方向均匀分布。相邻间距与首尾间距相等

4、align-items，几种竖向内容排序的方式。

flex-start: child对齐副轴起点(默认)
flex-end: child对齐副轴终点
center: child居中对齐副轴
stretch: child为弹性布局时(未设置副轴方向的大小或者为auto)，拉伸对齐副轴
baseline: 有文本存在时，child在副轴方向基于第一个文本基线对齐

5、flex-wrap，换行与不换行。

nowrap: 不换行(默认)
wrap: 自动换行

6、align-self，个别child的特别竖向排序方式。（属性名和align-items一样）