CSS 布局一直是前端工程师们需要掌握的重要技能。而其中的一个重要布局方式就是 Flexbox。它可以给你提供比传统布局方法更加灵活、高效的页面布局方式。在本文中，我们将深入探讨 Flexbox 的知识，并提供相关示例代码供学习参考。
什么是 Flexbox？
Flexbox 是一种 CSS 布局模式，使你能够通过设置容器中的子项目的位置、大小和顺序来组织和布局内容。Flexbox 布局模型是一个二维的、可反转的布局模型，因此它可以创建出高度可变和易维护的网站布局。
容器和子元素
Flexbox 布局模型将页面元素分为了容器和子元素。容器是要进行布局的任何 HTML 元素。而子元素则是放置在容器内的任何其他 HTML 元素。
以下是一个简单的包含三个子元素的 Flexbox 布局容器的示例：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
在这个示例中，.container 是 Flexbox 布局容器，.item 是放置在容器内的子元素。
容器的属性
Flexbox 布局容器具有如下可用属性：
display: flex;声明容器为 Flexbox 布局容器。
.container {
display: flex;
}flex-direction定义 Flexbox 布局容器中项目的排列方式。该属性可选的值为row,column,row-reverse, 和column-reverse。
.container {
display: flex;
flex-direction: row; /* 声明横向布局 */
}justify-content定义 Flexbox 容器内项目在主轴上的对齐方式，该属性可选的值为flex-start,flex-end,center,space-between,space-around, 和space-evenly。
.container {
display: flex;
justify-content: center; /* 居中对齐 */
}align-items定义 Flexbox 容器内项目在交叉轴上的对齐方式，该属性可选的值为flex-start,flex-end,center,baseline, 和stretch。
.container {
display: flex;
align-items: center; /* 垂直居中 */
}子元素的属性
Flexbox 布局容器中项目的排列位置和大小可以通过在子元素上设置以下属性来实现：
flex-grow定义在 Flexbox 布局容器空间不足时子元素如何增长，默认为 0，不进行增长。
.item {
flex-grow: 1; /* 在容器内占据外部可用空间的比例将为 1/3 */
}flex-shrink定义在 Flexbox 布局容器空间不足时子元素如何缩小，默认为 1，进行缩小。
.item {
flex-shrink: 0; /* 在容器内不进行缩小 */
}flex-basis定义子元素在分配任何可以用的剩余空间之前分配的空间，默认为 auto，即由Flex容器自动分配。
.item {
flex-basis: 200px; /* 定义空间占据大小 */
}flex是flex-grow,flex-shrink, 和flex-basis的缩写属性。
.item {
flex: 1 1 200px; /* 总占据外部可用空间的比例将为 1/3 */
}示例
以下是一个示例 Flexbox 布局容器，其中包含三个元素，使用了上述所有属性：
<div class="container"> <div class="item" style="background-color: blue;"></div> <div class="item" style="background-color: red; flex-basis: 150px; flex-shrink: 0;"></div> <div class="item" style="background-color: green;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- ------- ------------ ------- ------- ------ - ----- - ----- - - ----- -
在这个示例中，Flexbox 布局容器水平居中，其子元素共享一个基础大小和空间 flexGrow 属性，在这种情况下，这意味着所有子元素平均分配剩余可用空间。
其中第二个子元素定义了一个固定空间大小，即只占据 150px 的宽度，以上设置使得其他两个子元素分配了所有可用剩余空间。
总结
Flexbox 是一种强大的 CSS 布局模式，可以使创建多种复杂的布局方案变得更加容易。掌握这些属性和示例可以帮助你更好地理解和应用 Flexbox，从而在你的前端开发中提供更加高效灵活的页面布局方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469c26c968c7c53b099644f