CSS Flexbox 子属性的简述与详述

欢迎各位朋友回来！这次，我们将深入探讨 Flexbox Children 及其相关属性。

链接到上一篇关于容器属性的文章。

这篇博文会有什么内容？更多图表、更多列表，希望还能提供一些有用的信息。也许吧。我们拭目以待。

出发！

亲子关系

上次我们重点介绍了容器，也就是 Flexbox 的父元素。今天，我们将研究这些父元素的子元素，也就是容器内部包含的内容。明白了吗？不明白？没关系，这里有一张图示供你参考：

所以，正如我们所见，子元素是父元素的直接关联元素。当你将父元素设置为可伸缩属性时display: flex;，子元素会立即继承该属性并成为一个可伸缩项。这样一来，我们就可以使用一些新的、子元素特有的属性来操作这些项。

输入属性

让我们继续我们在第一篇关于 Flexbox 容器属性的文章中开始的内容，并使用列表和图表进行一些认真的学习。

order
这个属性正如其名——它定义了容器内元素的顺序。它接受一个数值，用于告诉对象应该出现在哪里：例如，如果我们给元素 3 设置一个值为 `<item>` 的属性order: 0;，它就会出现在元素的开头，就像这样：

如果我们给项目 1 设置一个 order 属性order: 4;，它看起来会像这样：

简单却有效。一处优质可靠的房产。

flex-grow
这个方法虽然稍微复杂一些，但同样有效。

这样一来，物品的大小就会根据可用空间自动调整，并定义物品的大小。默认值为 0，表示物品不会自动增长。但随着此值的增加，物品的大小会根据其他物品的值而增大/减小。

是不是已经一头雾水了？反正我是。

假设flex-grow: 1;物品 1 和物品 2 的值都为 0，但物品 2 的值被设置为 0。flex-grow: 2;这意味着物品 3 的增长速度将是其他弹性项目的两倍，因此其结构大致如下：

这在打造优质、响应式网站方面具有巨大的潜力。这就引出了下一个特性：

flex-shrink
猜猜这有什么作用？拜托，我相信你，真的。

此属性会按您指定的值缩小它所在的项。默认值为 1，所以假设我们给项 3 设置了一个值为 1 的属性flex-shrink: 2;。最终结果会像这样：

没错，它和上一个属性正好相反。“生长”会使物品变大，而“缩小”会使物品变小。

flex-basis
与上述两个属性有些关联，这个属性也与物品的长度有关。它设置物品的初始长度，长度单位可以是长度单位或百分比。

我其实就不画图了。请向上滚动到图表，想象一下，如果我们不用 `<string>`flex-grow而是用 ` <string>`，结果是一样的，只不过长度不是由浏览器自动确定，而是我们自己指定。flex-grow: 2;flex-basis: 200px;

flex
一个包含flex-grow、flex-shrink和flex-basis（按此顺序）的简写属性。是的，就是这样。继续。

align-self
此属性指定项目在容器中的水平对齐方式，并有几个不同的值。

• align-self: center;- 将项目水平居中对齐
• align-self: flex-start;将项目对齐到容器顶部
• align-self: flex-end;- 将物品对齐到容器底部。

接下来这张图将展示所有项目的示例（以及一个未附加此属性的默认项目）。项目 1 是默认值，项目 2 是align-self: center;，项目 3 是align-self: flex-start;，项目 4 是align-self: flex-end;。

如果这让你感到困惑，别担心！对我来说，最有效的方法是编写一个简单的布局（通常与我的图表完全一样），然后调整属性和值。

结论

等等……这就完了？感觉这篇文章比写关于容器属性的文章短多了……

但我希望这篇文章对你也有帮助，就像它对我一样。如果没有帮助，也没关系！网上有很多关于 Flexbox 的优质资源。

而这仅仅是个开始。还有很多高级技巧、专门的应用场景……我觉得关于 Flexbox 的文章我还没写完呢。