页面布局

1. 页面布局用的最多是是display: flex
   flex布局是一种一维的布局模式，它有两根轴线 — 主轴和交叉轴

主轴由 [`flex-direction`]定义，另一根轴垂直于它

主轴

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

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

如果你选择了 row 或者 row-reverse，你的主轴将沿着 **inline **方向延伸。

image.png

选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。

image.png

交叉轴

交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。

image.png
如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。

元素间的对齐和空间分配

Flexbox的一个关键特性是能够设置flex元素沿主轴方向和交叉轴方向的对齐方式，以及它们之间的空间分配。

align-items

align-items 属性可以使元素在交叉轴方向对齐。

这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。

你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐. 在实例中尝试——我给出了flex容器的高度，以便你可以看到元素在容器中移动。看看如果更改 align-items的值为下列值会发生什么：

• stretch
• flex-start
• flex-end
• center

justify-content

justify-content属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.

你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

在实例中尝试下列justify-content属性的值：

• stretch
• flex-start
• flex-end
• center
• space-around
• space-between

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox