在现代 Web 开发中，响应式设计已经成为了一个必不可少的技能。而 Flexbox 布局则是实现响应式设计的一种非常强大的工具。
本文将介绍如何使用 Flexbox 布局实现宽屏、窄屏、移动端多屏适配。我们会深入探讨 Flexbox 的各种属性，并通过实例代码演示如何使用这些属性来实现不同屏幕大小下的布局。
Flexbox 简介
Flexbox 是一种基于弹性盒子模型的布局方式。通过使用 Flexbox，我们可以轻松地控制元素的大小、位置和排列方式，从而实现各种复杂的布局。
Flexbox 布局的核心概念是容器和项目。容器是 Flexbox 布局的父元素，而项目则是容器中的子元素。通过设置容器和项目的各种属性，我们可以实现各种不同的布局效果。
Flexbox 属性详解
容器属性
display
Flexbox 布局需要将容器的 display 属性设置为 flex 或 inline-flex，才能生效。
.container {
display: flex;
}flex-direction
flex-direction 属性用于设置项目的排列方向。默认值为 row，表示水平方向排列。其它取值包括 column（垂直方向排列）、row-reverse（水平方向反向排列）和 column-reverse（垂直方向反向排列）。
.container {
flex-direction: row; /* 水平方向排列 */
flex-direction: column; /* 垂直方向排列 */
}flex-wrap
flex-wrap 属性用于设置项目是否换行。默认值为 nowrap，表示不换行。其它取值包括 wrap（换行）和 wrap-reverse（反向换行）。
.container {
flex-wrap: nowrap; /* 不换行 */
flex-wrap: wrap; /* 换行 */
}justify-content
justify-content 属性用于设置项目在主轴上的对齐方式。默认值为 flex-start，表示左对齐。其它取值包括 flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目两侧的间隔相等）。
.container {
justify-content: flex-start; /* 左对齐 */
justify-content: center; /* 居中对齐 */
}align-items
align-items 属性用于设置项目在交叉轴上的对齐方式。默认值为 stretch，表示拉伸对齐。其它取值包括 flex-start（顶部对齐）、flex-end（底部对齐）和 center（居中对齐）。
.container {
align-items: stretch; /* 拉伸对齐 */
align-items: center; /* 居中对齐 */
}align-content
align-content 属性用于设置多行项目在交叉轴上的对齐方式。默认值为 stretch，表示拉伸对齐。其它取值包括 flex-start（顶部对齐）、flex-end（底部对齐）和 center（居中对齐）。
.container {
align-content: stretch; /* 拉伸对齐 */
align-content: center; /* 居中对齐 */
}项目属性
flex-grow
flex-grow 属性用于设置项目的放大比例。默认值为 0，表示不放大。当容器的剩余空间大于 0 时，会按照 flex-grow 属性的比例分配剩余空间。
.item {
flex-grow: 1; /* 放大比例为 1 */
flex-grow: 2; /* 放大比例为 2 */
}flex-shrink
flex-shrink 属性用于设置项目的缩小比例。默认值为 1，表示可以缩小。当容器的空间不足时，会按照 flex-shrink 属性的比例缩小项目。
.item {
flex-shrink: 1; /* 缩小比例为 1 */
flex-shrink: 2; /* 缩小比例为 2 */
}flex-basis
flex-basis 属性用于设置项目的基准大小。默认值为 auto，表示使用项目的本来大小。当 flex-basis 设置为一个固定值时，项目的大小会被设置为这个值。
.item {
flex-basis: 100px; /* 基准大小为 100px */
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写。默认值为 0 1 auto，表示不放大、可以缩小、使用本来大小。可以使用一个值、两个值或三个值来设置 flex 属性。
.item {
flex: 1; /* 缩写形式，等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 0 1 100px; /* 缩写形式，等同于 flex-grow: 0; flex-shrink: 1; flex-basis: 100px; */
}order
order 属性用于设置项目的排列顺序。默认值为 0，表示按照源代码中的顺序排列。可以使用任意整数值来设置 order 属性。
.item {
order: 1; /* 排列顺序为 1 */
order: 2; /* 排列顺序为 2 */
}实战演练
宽屏布局
在宽屏幕下，我们希望将容器中的项目排列成两列。左侧列宽度为 30%，右侧列宽度为 70%。两列之间有 20px 的间隔。
HTML 代码：
<div class="container"> <div class="item">左侧列</div> <div class="item">右侧列</div> </div>
CSS 代码：
// javascriptcn.com 代码示例
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
margin-right: 20px;
}
.item:first-child {
flex-basis: 30%;
}
.item:last-child {
flex-basis: 70%;
margin-right: 0;
}窄屏布局
在窄屏幕下，我们希望将容器中的项目排列成一列。每个项目的宽度为 100%。两个项目之间有 20px 的间隔。
HTML 代码：
<div class="container"> <div class="item">项目一</div> <div class="item">项目二</div> </div>
CSS 代码：
// javascriptcn.com 代码示例
.container {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
margin-bottom: 20px;
}移动端布局
在移动端下，我们希望将容器中的项目排列成一列。每个项目的宽度为 100%。两个项目之间没有间隔。
HTML 代码：
<div class="container"> <div class="item">项目一</div> <div class="item">项目二</div> </div>
CSS 代码：
// javascriptcn.com 代码示例
.container {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
margin-bottom: 0;
}总结
Flexbox 布局是一种非常强大的工具，可以帮助我们轻松地实现各种复杂的布局。本文介绍了 Flexbox 布局的各种属性，并通过实例代码演示了如何使用这些属性来实现宽屏、窄屏、移动端多屏适配。希望读者能够通过本文的学习，掌握 Flexbox 布局的使用方法，提高自己的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655dced1d2f5e1655d8178bb