布局理解
弹性布局的其他属性,就是规定盒模型内的元素在主轴和交叉轴方向上的对齐方式
按步骤理解容器属性
- 首先定义好主轴方向
flex-direction: row;
flex-direction: row | row-reverse | column | column-reverse;
- 定义元素在主轴方向上的对齐方式
justify-content: start;
justify-content: start | center | space-between | space-around | space-evenly;
- 元素过多超出盒子范围，需要通过
flex-wrap: wrap;定义主轴方向元素换行
flex-wrap: wrap | nowrap | wrap-reverse;
-
可以通过
flex-flow: row wrap;来简写flex-direction和flex-wrap; -
调整元素在交叉轴上的对齐方式, 使其垂直居中
align-items: center;
align-items: center | start | end | stretch;
- 上一步发现每行子元素都相对交叉轴垂直居中，并不是整体垂直居中，所以需要使用 align-content: center 来达到效果。
align-content: flex-start | flex-end | center | space-between | space-around | stetch;
只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。
- 使用 gap: 5px 10px; 来定义 row-gap 和 column-gap
