https://zhuanlan.zhihu.com/p/32946068
flex的几个参数:
-
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
image.png
image.png
image.png
image.png
- flex-direction 容器内项目的排列方向（即项目的排列方向）(默认横向排列)
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
- flex-wrap 容器内项目换行方式
nowrap（默认）：不换行
wrap：换行，第一行在上方
-
align-content 项目在交叉轴上如何对齐（垂直）
image.png
-
align-items
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
image.png
align-items:
image.png
- flex-grow:
属性定义 “items” 的放大比例，默认为0，也就是如果存在剩余空间，也不放大。
如果每个 “item” 的flex-grow属性值都为 “1”，那么每个 “item” 等分剩余空间。
.item {
flex-grow: 1;
}
flex-grow属性值为 “3”，其他的都为 “1”。那么它占据的剩余空间为其他的3倍。
- flex-basis:
flex-basis: 350px;
/*固定宽为350px*/
