CSS3 Flexbox 是一个用于布局的强大工具，经过它的支持，我们能够更加轻松地实现响应式布局和灵活的 UI 设计，本文将从以下几个方面详解 Flexbox 属性的使用。
一、Flexbox 基本概念
Flexbox 布局是一种基于 flex 容器和 flex 项目的布局方式，其中 flex 容器指的是以 display: flex 或 display: inline-flex 为元素样式的容器，而 flex 项目则是 flex 容器中包含的每一个子元素。
Flexbox 布局为我们提供了两个核心概念，分别是主轴和交叉轴。主轴（main-axis）是指 flex 容器的排列方向，而交叉轴（cross-axis）则是垂直于主轴方向的排列方向。
二、Flexbox 属性详解
1. flex-direction
flex-direction 属性用于指定 flex 容器内 flex 项目沿主轴的排列方向，其属性值为以下四种：
row：默认值，表示从左向右排列；row-reverse：从右向左排列；column：从上到下排列；column-reverse：从下到上排列。
示例代码：
.flex-container {
display: flex;
flex-direction: row-reverse;
}2. flex-wrap
flex-wrap 属性用于指定 flex 容器内 flex 项目在主轴上排列不下时是否进行换行，其属性值为以下三种：
nowrap：默认值，表示不换行；wrap：换行；wrap-reverse：反向换行。
示例代码：
.flex-container {
display: flex;
flex-wrap: wrap;
}3. justify-content
justify-content 属性用于指定 flex 容器内 flex 项目在主轴上的对齐方式，其属性值为以下五种：
flex-start：默认值，表示左对齐；flex-end：右对齐；center：居中对齐；space-between：两端对齐，项目之间的间隔相等；space-around：项目之间的间隔相等，项目两侧的间隔是相邻项目间距离的一半。
示例代码：
.flex-container {
display: flex;
justify-content: center;
}4. align-items
align-items 属性用于指定 flex 容器内 flex 项目在交叉轴上的对齐方式，其属性值为以下五种：
stretch：默认值，表示拉伸对齐；flex-start：顶部对齐；flex-end：底部对齐；center：居中对齐；baseline：基线对齐。
示例代码：
.flex-container {
display: flex;
align-items: center;
}5. align-content
align-content 属性用于指定多行 flex 项目在交叉轴上的对齐方式，其属性值与 justify-content 相似，但是只对于多行 flex 项目有效。
示例代码：
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}6. flex-grow
flex-grow 属性用于设置 flex 项目的放大比例，默认值为 0，表示不放大。在同一行或同一列内，空间有剩余时，将按照放大比例分配多余空间。
示例代码：
.flex-item {
flex-grow: 1;
}7. flex-shrink
flex-shrink 属性用于设置 flex 项目的缩小比例，默认值为 1，表示有剩余空间时会缩小。当空间不足时，将按照缩小比例平均缩小每个项目占用的空间，直到容器能够显示所有项目为止。
示例代码：
.flex-item {
flex-shrink: 1;
}8. flex-basis
flex-basis 属性用于设置 flex 项目在主轴上的初始大小，可以设置宽度和高度，它决定了 flex 项目在主轴方向上的空间大小。
示例代码：
.flex-item {
flex-basis: auto;
}9. flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式，默认值为 0 1 auto，其中 auto 表示 flex-basis 和元素本身压缩后的尺寸一致。
示例代码：
.flex-item {
flex: 1;
}三、Flexbox 示例
通过以下示例代码，我们可以更好地理解 Flexbox 属性的作用。
<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- - ---------- - ----- -- ------- ------ ------- ----- ----------------- ----- ----------- ------- ------------ ------ ---------- ----- -
上面的代码演示了 flex 容器中包含多个 flex 项目，通过 flex-wrap: wrap; 属性实现自动换行，通过 justify-content: center; 和 align-items: center; 属性实现居中对齐，通过 flex: 1; 属性将空间平均分配给每个 flex 项目。
四、总结
Flexbox 布局是一种强大的工具，能够为我们带来更加灵活和高效的 UI 设计，通过掌握以上的 Flexbox 属性，我们可以更好地实现响应式布局，快速实现复杂的 UI 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e070eaf6b2d6eab3b86099