CSS Flexbox 是一种用于布局的强大工具，可以轻松地实现复杂的布局结构。在前端开发中，使用 Flexbox 可以极大地提高开发效率和减少代码量。本文将介绍 CSS Flexbox 的基本概念、属性和示例，帮助您深入了解该技术，并加强您的前端开发技能。
基本概念
在了解 CSS Flexbox 之前，需要先了解一些基本概念。
- 主轴（main axis）：Flexbox 布局中的一个方向，可设置为行（水平）或列（垂直）。
- 交叉轴（cross axis）：与主轴垂直的另一个方向。
- Flex 容器（flex container）：包含了 Flex 项目（flex item）的父级元素。
- Flex 项目（flex item）：Flexbox 布局中的子元素。
属性介绍
接下来，我们将逐一介绍 Flexbox 布局中主要的属性。
display
使用 display 属性可以将一个元素设置为 Flex 容器。例如：
.container {
display: flex;
}注意，Flexbox 布局只适用于 Flex 容器内的元素。
flex-direction
使用 flex-direction 属性可以设置 Flex 容器的主轴方向。可选值有 row、row-reverse、column 和 column-reverse。默认值为 row。例如：
.container {
flex-direction: row; /*水平排列*/
/*flex-direction: row-reverse; 水平逆序*/
/*flex-direction: column; 垂直排列*/
/*flex-direction: column-reverse; 垂直逆序*/
}justify-content
使用 justify-content 属性可以设置 Flex 项目在主轴上的对齐方式。可选值有 flex-start、flex-end、center、space-between 和 space-around。例如：
.container {
justify-content: flex-start; /*容器的起始位置*/
/*justify-content: flex-end; 容器的末尾位置*/
/*justify-content: center; 容器的居中位置*/
/*justify-content: space-between; 项目之间平均分布*/
/*justify-content: space-around; 项目之间平均分布，两端留有空白*/
}align-items
使用 align-items 属性可以设置 Flex 项目在交叉轴上的对齐方式。可选值有 flex-start、flex-end、center、baseline 和 stretch。例如：
.container {
align-items: flex-start; /*项目向交叉轴起始位置对齐*/
/*align-items: flex-end; 项目向交叉轴末尾位置对齐*/
/*align-items: center; 项目在交叉轴上居中对齐*/
/*align-items: baseline; 项目在交叉轴上以基线对齐*/
/*align-items: stretch; 项目在交叉轴上拉伸以填满整个容器*/
}flex-wrap
使用 flex-wrap 属性可以设置 Flex 项目是否换行。可选值有 nowrap、wrap 和 wrap-reverse。默认值为 nowrap。例如：
.container {
flex-wrap: nowrap; /*不换行*/
/*flex-wrap: wrap; 换行*/
/*flex-wrap: wrap-reverse; 换行且逆序*/
}align-content
使用 align-content 属性可以设置多行 Flex 项目在交叉轴上的对齐方式。可选值与 justify-content 相同。例如：
.container {
align-content: flex-start; /*多行项目向交叉轴起始位置对齐*/
/*align-content: flex-end; 多行项目向交叉轴末尾位置对齐*/
/*align-content: center; 多行项目在交叉轴上居中对齐*/
/*align-content: space-between; 多行项目之间平均分布*/
/*align-content: space-around; 多行项目之间平均分布，两端留有空白*/
/*align-content: stretch; 多行项目在交叉轴上拉伸以填满整个容器*/
}order
使用 order 属性可以设置 Flex 项目的显示顺序。默认值为 0。例如：
.item:first-child {
order: 1; /*将该项目放到最后*/
}flex-grow
使用 flex-grow 属性可以设置 Flex 项目的伸展比例。默认值为 0。例如：
.item:nth-child(2) {
flex-grow: 1; /*该项目比其他项目的增长比例更大*/
}flex-shrink
使用 flex-shrink 属性可以设置 Flex 项目的收缩比例。默认值为 1。例如：
.item:nth-child(2) {
flex-shrink: 0; /*该项目不会缩小*/
}flex-basis
使用 flex-basis 属性可以设置 Flex 项目的初始大小。默认值为 auto。例如：
.item:nth-child(2) {
flex-basis: 100px; /*该项目的初始大小为 100px*/
}flex
使用 flex 属性可以同时设置 flex-grow、flex-shrink 和 flex-basis。例如：
.item:nth-child(2) {
flex: 1 0 100px; /*该项目的伸展比例为 1，不会缩小，初始大小为 100px*/
}示例
接下来，我们将展示一些常见布局场景的示例代码。
水平居中
如果您想让内容在容器中水平居中，您可以使用以下代码：
.container {
display: flex;
justify-content: center;
align-items: center;
}等高布局
如果您想让多个 Flex 项目等高，您可以使用以下代码：
.container {
display: flex;
}
.item {
flex: 1;
}双栏布局
如果您想要实现左侧固定宽度，右侧自适应宽度的双栏布局，您可以使用以下代码：
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----- - - ------ ------ ------- - ------ - ----- -- --------- -
等间距布局
如果您想要实现多个 Flex 项目等间距分布的布局，您可以使用以下代码：
.container {
display: flex;
justify-content: space-between;
}垂直居中
如果您想要实现多个 Flex 项目在容器中垂直居中，您可以使用以下代码：
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /*垂直方向*/
}结论
在本文中，我们深入了解了 CSS Flexbox 的基本概念和主要属性，并展示了一些常见的应用场景示例。使用 CSS Flexbox 可以方便快捷地实现复杂的布局结构，提高前端开发效率和代码可维护性。希望本文对您学习和实践 Flexbox 布局有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee59636fbf9601972168b1