弹性盒布局

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

flexbox 的两根轴线

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关，所以有必要在一开始首先理解它。

主轴由 flex-direction 定义，可以取 4 个值：

• row
• row-reverse
• column
• column-reverse

如果你选择了 row 或者 row-reverse，你的主轴将沿着行向延伸，交叉轴的方向沿着上下方向延伸。

当主轴方向设置为 row 时，主轴沿着行向延伸

选择 column 或者 column-reverse 时，你的主轴会沿着页面的上下方向延伸——也就是块向，交叉轴就是水平方向。

当主轴方向设置为 column 时，主轴沿着块向延伸

• 元素排列为一行（flex-direction 属性的初始值是 row）。
• 元素从主轴的起始线开始。
• 元素不会在主维度方向拉伸，但是可以缩小。
• 元素被拉伸来填充交叉轴大小。
• flex-basis 属性为 auto。这个 flex-basis 属性 被指定为关键词 content 或者 <'width'>.
• flex-wrap 属性为 nowrap。CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示

flex 元素上的属性

为了更好地控制 flex 元素，有三个属性可以作用于它们：

• flex-grow 用于控制弹性项目如何增长，属性规定为一个 <number>

• flex-shrink 用于控制弹性项目如何收缩，属性只能是一个 <number>

• flex-basis 用于控制弹性项目初始大小，属性被指定为content或者关键词<'width'>的宽度值

Justify Content

justifyContent描述如何在容器的主轴内对齐子项。

flexDirection（伸缩方向）设置为row（行）时，你可以使用此属性在容器内水平居中一个子元素，或在flexDirection设置为column（列）时，在容器内垂直居中一个子元素。

• flex-start（默认值）将容器的子项与容器主轴的起点对齐。
• flex-end将容器的子项与容器主轴的末端对齐。
• center将容器的子项与容器主轴的中心对齐。
• space-between沿着容器的主轴均匀分布子元素，并在子元素之间分配剩余空间。
• space-around沿容器主轴均匀分布子元素，并将剩余空间分布在子元素周围。与 相比space-between，使用space-around会导致空间分布到第一个子元素的开头和最后一个子元素的结尾。
• space-evenly沿主轴均匀分布对齐容器内的子项。每对相邻项之间的间距、主起始边缘与第一个项之间的间距以及主结束边缘与最后一个项之间的间距都完全相同。

Align Items

alignItems描述如何沿容器的横轴对齐子元素。它与非常相似justifyContent，但不是应用于主轴，而是alignItems应用于横轴。

• stretch（默认值）拉伸容器的子项以匹配height容器的横轴。
• flex-start将容器的子项与容器横轴的起点对齐。
• flex-end将容器的子项与容器横轴的末端对齐。
• center将容器的子项与容器横轴的中心对齐。
• baseline将容器的子项沿公共基线对齐。可以将各个子项设置为其父项的参考基线。

最后，一个用来学flex的布局网站