弹性容器属性

我建立了一些基本原理：什么是弹性容器（flex-containers）和弹性项目（flex-items），以及如何启动 Flexbox 模型。

将父元素设置为弹性容器后，就可以在该容器上使用一些对齐属性。

就像你为块级元素定义宽度时使用 width: 200px 一样，弹性容器也可以接受六种不同的属性。

好消息是，这些属性的设置方式与你已经熟悉的用法没有区别。

1. Flex-direction

Flex-direction 属性控制弹性项目沿主轴的排列方向。

它可以取以下四个值之一：

1/*ul 代表一个弹性容器*/
2ul {
3  flex-direction: row || column || row-reverse || column-reverse;
4}

通俗地说，flex-direction 属性让你决定弹性项目的布局方式：可以是水平、垂直，或在两个方向上都反向排列。

从技术角度讲，“水平”和“垂直”并不是弹性布局中方向的正式名称。

它们被称为 主轴 和 交叉轴。默认情况如下所示。

再次用通俗语言解释：主轴的默认方向感觉像是水平的——从左到右。

而交叉轴则感觉像是垂直的——从上到下。

默认情况下，flex-direction 的值为 row，它会将弹性项目沿主轴排列。这解释了本文开头无序列表的表现。

尽管未显式设置 flex-direction，但它采用了默认值 row。

因此，弹性项目沿主轴水平排列，从左到右堆叠。

如果将 flex-direction 改为 column，主轴就变成垂直方向，弹性项目将沿主轴从上到下排列。

它们将从上到下堆叠，不再从左到右排列。

2. Flex-wrap

flex-wrap 属性可取以下三个值之一：

1//ul 代表一个弹性容器
2ul {
3  flex-wrap: wrap || no-wrap || wrap-reverse;
4}

我将通过一个例子来说明 flex-wrap 属性的工作原理。

尝试向无序列表中添加更多列表项。

你觉得会发生什么？弹性容器会自动调整以容纳更多内容，还是会把列表项换到新的一行？

1/*添加3个额外的li元素*/
2<ul> <!--父元素-->
3  <li></li> <!--第一个子元素-->
4  <li></li> <!--第二个子元素-->
5  <li></li> <!--第三个子元素-->
6  <li></li>
7  <li></li>
8  <li></li>
9</ul>

幸运的是，弹性容器能够自适应地容纳新增的弹性项目。

再进一步试试。

给父元素添加大量弹性项目，总共达到10个。

会发生什么？

再次看到，即使浏览器需要横向滚动，弹性容器仍能适应并容纳所有子元素。

这是每个弹性容器的默认行为：弹性容器会持续在一行中容纳更多弹性项目。

这是因为 flex-wrap 的默认值是 nowrap，这意味着弹性容器不会换行。

1ul {
2	flex-wrap: nowrap; /*持续接收更多弹性项目而不换行*/
3}

no-wrap 并非不可更改的固定值，它是可以被修改的。

当有这么多弹性项目时，你肯定希望它们能在弹性容器内“换行”。

“换行”其实是一种更形象的说法：当弹性容器内的可用空间无法容纳所有弹性项目在默认宽度下的布局时，就将其拆分为多行。

这可以通过 wrap 值实现。

1ul {
2	flex-wrap: wrap;
3}

启用此设置后，当单行无法容纳所有列表项的默认宽度时，弹性项目就会自动拆分为多行。

即使浏览器窗口被缩放，也会如此。

这就是它的效果：

注意，弹性项目现在以默认宽度显示，无需强制将多个项目挤在同一行。

还有一个值：wrap-reverse。

没错，你猜对了。它让弹性项目也能换行，但方向是相反的。

3. Flex-flow

flex-flow 是 flex-direction 与 flex-wrap 的简写属性。

你是否用过 border 的简写属性？比如 border: 1px solid red。

这里也是同样的概念：在一个声明中同时设置多个值。

看下面的例子：

1ul {
2	flex-flow: row wrap; /*方向为 row，且允许换行*/
3}

尝试其他组合：flex-flow: row nowrap、flex-flow: column wrap、flex-flow: column nowrap。

产生的效果与单独使用 flex-direction 和 flex-wrap 时完全相同。

我相信你已经清楚它们各自的效果。

不妨动手试一试。

4. Justify-content

有了 Flexbox 模型，生活真的变得轻松多了。如果你还不信，那么 justify-content 属性或许能说服你。

justify-content 属性可取以下五个值之一：

1ul {
2	justify-content: flex-start || flex-end || center || space-between || space-around
3}

那么 justify-content 到底有什么作用？

它可能让你联想到 text-align 属性。

justify-content 属性定义了弹性项目在主轴上的分布方式。

举个简单的例子。

考虑下面这个基础的无序列表：

1<ul>
2  <li>1</li>
3  <li>2</li>
4  <li>3</li>
5</ul>

加上一些基础样式：

通过 justify-content 属性，你可以自由地控制三个弹性项目在主轴上的排列方式。

以下是各种选项的具体效果：

(i) Flex-start

默认值是 flex-start。

flex-start 会将所有弹性项目聚集在主轴的起点。

1ul {
2	justify-content: flex-start;
3}

(ii) Flex-end

flex-end 会将弹性项目聚集在主轴的终点。

1ul {
2	justify-content: flex-end;
3}

(iii) Center

center 如其名，将弹性项目在主轴上居中对齐。

1ul {
2	justify-content: center;
3}

(iv) Space-between

space-between 会在每两个弹性项目之间保持相等的间距。

1ul {
2	justify-content: space-between;
3}

你有没有注意到这里有些不同？

请看下方的示意图：

(v) Space-around

最后，space-around 会在每个弹性项目周围保持相等的间距。

1ul {
2	justify-content: space-around;
3}

</webpackbin

再仔细看看：

不用担心这些属性看起来太多太复杂。只要稍加练习，你很快就能熟练掌握它们的语法。

务必理解它们如何影响弹性项目在主轴上的显示效果。

5. Align-items

align-items 属性与 justify-content 有些相似。

在理解了 justify-content 之后，这个属性会更容易掌握。

align-items 可以设置为以下任意一个值：flex-start || flex-end || center || stretch || baseline

1/*ul 代表任意弹性容器*/
2ul {
3	align-items: flex-start || flex-end || center || stretch || baseline
4}

它定义了弹性项目在交叉轴上的对齐方式。这是 align-items 与 justify-content 的主要区别。

下面是不同值对弹性项目的影响：

请记住，这些属性影响的是交叉轴的方向。

(i) Stretch

默认值是 stretch。它会将弹性项目“拉伸”至填满弹性容器的整个高度。

</webpackbin

(ii) Flex-start

flex-start 如你所料，将弹性项目聚集在交叉轴的起点。

</webpackbin

(iii) Flex-end

如预期，flex-end 将弹性项目聚集在交叉轴的终点。

</webpackbin

(iv) Center

center 值同样直观，它将弹性项目居中对齐在弹性容器的交叉轴中心。

</webpackbin

(v) Baseline

那 baseline 呢？

它会根据弹性项目的基线进行对齐。

</webpackbin

“基线”听起来很专业。

虽然结果看起来像 flex-start，但其实有细微差别。

到底什么是“基线”？

下图可以帮助你理解：

注意，所有弹性项目都对其内容的“基线”进行了对齐。

6. Align-content

在讨论 wrap 属性时，你还记得往弹性容器中添加更多弹性项目后发生了什么吗？

你会得到一个多行的弹性容器。

align-content 属性正是用于多行弹性容器。

它支持与 align-items 相同的值，但不包括 baseline。

根据定义，它控制多行弹性容器中弹性项目的对齐方式。

与 align-items 一样，默认值也是 stretch。

你现在应该已经熟悉这些值了。以下是它们在包含10个弹性项目的多行容器中的表现：

(i) Stretch

使用 stretch 时，弹性项目会沿交叉轴“拉伸”，以填充可用空间。

你看到的项目之间的间距，是由项目自身的 margin 设置造成的。

(ii) Flex-start

你之前见过 flex-start。

这次它将多行容器中的项目对齐到交叉轴的起点。

记住，交叉轴默认是从上到下。

因此，弹性项目被对齐到弹性容器的顶部。

(iii) Flex-end

flex-end 值将弹性项目对齐到交叉轴的终点。

(iv) Center

正如你所猜测的，center 将弹性项目对齐到交叉轴的中心。

这就是弹性容器属性的全部内容。

你现在已掌握如何使用各种弹性容器属性。