CSS Flexbox 是一种前端布局模式，它可以帮助我们更轻松地实现各种复杂的布局。在使用 Flexbox 进行布局时，父元素和子元素之间有着非常重要的关系。
父元素与子元素的关系
在使用 Flexbox 进行布局时，我们需要确定父元素和子元素的关系。父元素是我们应用 Flexbox 的容器，而子元素则是我们需要布置的元素。在 Flexbox 布局中，有两种常见的父子关系：
- 行布局 (row layout)：父元素作为一行，子元素在行中按照从左到右的顺序进行排列。
- 列布局 (column layout)：父元素作为一列，子元素在列中按照从上到下的顺序进行排列。
父元素的 flex 属性
在使用 Flexbox 进行布局时，我们需要设置父元素的 display 属性为 flex。这样才能启用父元素的 Flexbox 功能。此外，我们还需要使用 flex-direction 属性指定父元素的布局方向，默认值为 row。当设置为 row 时，父元素会以行布局方式显示；当设置为 column 时，父元素会以列布局方式显示。
除了 flex-direction 属性之外，还有许多其他属性可以控制父元素的布局方式。例如：justify-content 可以控制子元素在父元素水平方向上的对齐方式，align-items 可以控制子元素在父元素垂直方向上的对齐方式，flex-wrap 可以控制子元素在父元素中是否换行等。
下面是一些常用的父元素属性：
---------- - -------- ----- -- -- ------- -- -- --------------- ---- -- ------------ -- ---------------- ------- -- ---------------- -- ------------ ------- -- ---------------- -- ---------- ----- -- ---------- -- -
子元素的 flex 属性
在使用 Flexbox 进行布局时，我们还需要给子元素设置 flex 属性。该属性包含三个值，分别是：flex-grow、flex-shrink 和 flex-basis。分别表示子元素在剩余空间中应分配的比例、在空间不足的情况下子元素是否缩小、子元素的初始大小。
下面是一个例子：
---- ------------------ ---- ----------- ----------- ------- ---- ----------- ----------- ------- ---- ----------- ----------- ------- ------
CSS：
---------- - -------- ----- -- -- ------- -- -- - ----- - ----- -- -- --------- -- -
在上面的例子中，我们将父元素设为 Flexbox 容器，并为每个子元素设置了 flex 属性。由于每个子元素的 flex-grow 属性都为 1，它们会均分父元素中剩余的空间。
如果我们想要改变子元素的分配比例，只需改变它们的 flex-grow 属性：
------ - ---------- -- -- -------------- -- -
总结
在使用 Flexbox 进行布局时，父元素和子元素之间的关系非常重要。使用 display: flex 属性以及 flex-direction 属性可以将父元素设为 Flexbox 容器，并控制子元素的布局方向。而使用 flex 属性可以控制子元素的分配比例。在实际应用中，我们还可以使用其他的 Flexbox 属性来实现各种不同的布局效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0ea5b48841e9894d24762