什么是流式布局？
流式布局又称为响应式布局，是指随着屏幕尺寸的变化，网页内容会自动的调整布局以适应不同设备的展示。流式布局是现代 Web 设计必不可少的技术，因为人们现在使用各种不同的设备来访问网站，如智能手机、平板等。因此，流式布局可以让页面在不同设备上展示效果更佳。
CSS Flexbox
CSS Flexbox 是一个用于创建弹性布局的模块。通过使用 Flexbox，可以更简单、更高效地实现流式布局。它提供了一些令人钦佩的功能，例如在盒子之间的便捷对齐和分配空间等。同时，它还允许我们为不同的屏幕大小设计自适应布局，使得页面在各种尺寸的设备上更具可读性和可用性。
如何使用 CSS Flexbox 实现流式布局
1. 父容器（container）属性
要使用 Flexbox 实现流式布局，首先需要在“父容器”或称“容器”上设置“display: flex”。这告诉浏览器该元素使用 Flexbox，而不是默认的 “block” 或 “inline” 布局方式。
.container {
display: flex;
}2. 子容器（item）属性
之后，我们可以在“子容器”或称“项目”上使用 Flexbox 的“flex”属性。此属性控制子容器的大小、对齐方式和空间分配。
常见的 flex 属性取值有：
- flex-grow：定义项目的放大比例，默认值为：0。
- flex-shrink：定义了项目的缩小比例，默认值为：1。
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。
.item {
flex: 1; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}3. 主轴和交叉轴
Flexbox 有两个轴：主轴和交叉轴。默认情况下，主轴是水平方向的，并且子容器被水平排列。如果想要使子容器垂直排列，可以将“flex-direction”属性设置为“column”。
.container {
display: flex;
flex-direction: column; /* 主轴变为纵向 */
}同时，可以使用“justify-content”和“align-items”属性来对齐子容器：
.container {
display: flex;
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
}4. 响应式设计
如前所述，流式布局的一个重要特征是它可以在不同的设备大小下进行优雅的自适应调整。Flexbox 可以让我们很容易地实现响应式设计，而不需要编写大量的媒体查询。
Flexbox 提供了“flex-wrap”属性，可以控制子容器在“换行”或“不换行”时如何分配布局。
.container {
display: flex;
flex-wrap: wrap; /* 换行显示 */
}5. 示例代码
下面是一些实际使用 Flexbox 实现流式布局的代码片段，供读者参考：
等宽子容器排列
HTML 代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- -- -------- -- - ----- - ----- -- ------- ------ ----------- ----- -
子容器大小不等排列
HTML 代码：
<div class="container"> <div class="item small"></div> <div class="item large"></div> <div class="item small"></div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------- ------ - ------ - ----- -- ----------- ----- - ------ - ----- -- ----------- ----- -
响应式设计
HTML 代码：
<div class="container"> <div class="item large"></div> <div class="item small"></div> <div class="item small"></div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ------- ------ ----- - - ---- -- ---------- -- ----------- --- -- ------------- ----- - ------ - ----- - - ---- ----------- ----- - ------ - ----------- ----- -
总结
Flexbox 是一个非常灵活的布局工具，能够使我们轻松地创建出各种不同的布局。它通过一些简单的属性，使得响应式设计更加高效，同时提供了更好的对齐和空间分配控制。如果你还没有使用 Flexbox，强烈建议你去尝试一下，相信会对你的 Web 设计和开发有不小的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64871a5748841e98945c54f8