Flex 布局学习总结（对齐方式）

一、Flex布局是什么

Flex布局是一种现代的、弹性的CSS布局模型，一般简称弹性布局，
全称为Flexible Box Layout。它提供了一种更加高效、直观的方式来设计、排列和对齐容器中的子元素。Flex布局适用于响应式设计，能够轻松适应不同屏幕大小和设备类型。

二、基本概念

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、配置：

四、容器的对齐方式属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

4.1 flex-direction

该属性决定了 Flex 容器中主轴的方向。主轴是 Flex 项目在容器中排列的方向

四个值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

4.2 flex-wrap

该属性定义了 Flex 容器中的 Flex 项目是否应该换行

nowrap：所有 Flex 项目在一行上排列（默认值）。
wrap：Flex 项目可能会换行，多个行堆叠。
wrap-reverse：Flex 项目可能会换行，但是交叉轴的起始和结束位置会互换。

4.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4.4 justify-content

该属性用于控制 Flex 容器中 Flex 项目在主轴上的对齐方式。

flex-start：项目在主轴起始位置对齐。
flex-end：项目在主轴结束位置对齐。
center：项目在主轴居中对齐。
space-between：项目在主轴上均匀分布，首尾两个项目分别靠近容器起始和结束边界。
space-around：项目在主轴上均匀分布，项目两侧的间隔相等。

4.5 align-items

有主轴 那么就有交叉轴，该属性用于控制 Flex 容器中 Flex 项目在交叉轴上的对齐方式。

flex-start：项目在交叉轴起始位置对齐。
flex-end：项目在交叉轴结束位置对齐。
center：项目在交叉轴居中对齐。
baseline：项目在交叉轴上以基线对齐。
stretch：项目在交叉轴上拉伸以适应容器的高度（默认值）。

4.6 align-content

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

flex-start：在交叉轴起始位置对齐。
flex-end：在交叉轴结束位置对齐。
center：在交叉轴居中对齐。
space-between：在交叉轴上均匀分布，首尾两行分别靠近容器起始和结束边界。
space-around：在交叉轴上均匀分布，行两侧的间隔相等。
stretch：在交叉轴上拉伸以适应容器的高度。

总结

根据学习与实践，大致对元素的对齐的方式有了一定了解。

参考

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.runoob.com/w3cnote/flex-grammar.html