引言
CSS Flexbox 是一种用于布局的弹性盒模型，它的出现为前端开发者提供了一种更加简单、灵活和强大的布局方式。本文将介绍 CSS Flexbox 的基本概念、使用方法和一些实际应用，帮助读者快速掌握这种布局方式。
基本概念
在深入了解 CSS Flexbox 布局之前，我们需要了解一些基本概念。
Flex Container
Flex Container 是一个包含 Flex Items 的父容器。通过设置 Flex Container 的属性，我们可以控制 Flex Items 的排列方式和对齐方式。
Flex Item
Flex Item 是 Flex Container 中的子元素。它们可以是任何 HTML 元素，包括文本、图片、表格等。通过设置 Flex Item 的属性，我们可以控制它们在 Flex Container 中的排列方式和对齐方式。
Flex Axis
Flex Axis 是 Flex Container 的主轴，Flex Items 沿着这个轴排列。默认情况下，Flex Axis 是水平方向的，即从左到右排列。
Cross Axis
Cross Axis 是与 Flex Axis 垂直的轴，Flex Items 沿着这个轴对齐。默认情况下，Cross Axis 是垂直方向的，即从上到下排列。
使用方法
Flex Container 属性
要使用 CSS Flexbox 布局，需要将一个元素设置为 Flex Container。可以使用 display: flex 或 display: inline-flex 属性来实现。
/* 将元素设置为 Flex Container */
.container {
display: flex;
}在设置了 Flex Container 后，我们可以使用以下属性来控制 Flex Items 的排列方式和对齐方式。
flex-direction
flex-direction 属性用于设置 Flex Axis 的方向。默认值为 row，即从左到右排列。其他可选值包括：
row-reverse：从右到左排列。column：从上到下排列。column-reverse：从下到上排列。
/* 将 Flex Axis 方向设置为从上到下 */
.container {
flex-direction: column;
}justify-content
justify-content 属性用于控制 Flex Items 在 Flex Axis 上的对齐方式。默认值为 flex-start，即左对齐。其他可选值包括：
flex-end：右对齐。center：居中对齐。space-between：两端对齐，项目之间的间隔相等。space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
/* 将 Flex Items 在 Flex Axis 上居中对齐 */
.container {
justify-content: center;
}align-items
align-items 属性用于控制 Flex Items 在 Cross Axis 上的对齐方式。默认值为 stretch，即拉伸对齐。其他可选值包括：
flex-start：顶部对齐。flex-end：底部对齐。center：居中对齐。baseline：基线对齐。
/* 将 Flex Items 在 Cross Axis 上底部对齐 */
.container {
align-items: flex-end;
}flex-wrap
flex-wrap 属性用于控制 Flex Items 是否换行。默认值为 nowrap，即不换行。其他可选值包括：
wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
/* 允许 Flex Items 换行 */
.container {
flex-wrap: wrap;
}align-content
align-content 属性用于控制多行 Flex Items 在 Cross Axis 上的对齐方式。只有在 Flex Container 具有多行 Flex Items 时才有效。默认值为 stretch，即拉伸对齐。其他可选值与 justify-content 相同。
/* 将多行 Flex Items 在 Cross Axis 上居中对齐 */
.container {
align-content: center;
}Flex Item 属性
在设置了 Flex Container 和 Flex Items 后，我们可以使用以下属性来控制 Flex Items 的大小和对齐方式。
flex-grow
flex-grow 属性用于控制 Flex Item 的放大比例。默认值为 0，即不放大。当所有 Flex Items 的 flex-grow 值相同时，它们将等分剩余空间。当某个 Flex Item 的 flex-grow 值为 2，而其他 Flex Items 的 flex-grow 值均为 1 时，前者将占据的空间是后者的两倍。
/* 将 Flex Item 的放大比例设置为 2 */
.item {
flex-grow: 2;
}flex-shrink
flex-shrink 属性用于控制 Flex Item 的缩小比例。默认值为 1，即可以缩小。当所有 Flex Items 的 flex-shrink 值相同时，它们将等分空间。当某个 Flex Item 的 flex-shrink 值为 0，而其他 Flex Items 的 flex-shrink 值均为 1 时，前者将不会收缩。
/* 将 Flex Item 的缩小比例设置为 0 */
.item {
flex-shrink: 0;
}flex-basis
flex-basis 属性用于设置 Flex Item 的初始大小。默认值为 auto，即由内容撑开。其他可选值包括像素、百分比、内容宽度等。
/* 将 Flex Item 的初始大小设置为 100 像素 */
.item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。默认值为 0 1 auto，即不放大、可以缩小、由内容撑开。可以使用以下方式设置：
/* 将 Flex Item 的放大比例设置为 2，缩小比例设置为 0，初始大小设置为 100 像素 */
.item {
flex: 2 0 100px;
}align-self
align-self 属性用于控制单个 Flex Item 在 Cross Axis 上的对齐方式。它的值与 align-items 相同，但只影响当前 Flex Item。
/* 将当前 Flex Item 在 Cross Axis 上居中对齐 */
.item {
align-self: center;
}实战应用
等高布局
CSS Flexbox 布局可以轻松实现等高布局，即多个 Flex Item 的高度相等。
<div class="container"> <div class="item">Flex Item 1</div> <div class="item">Flex Item 2</div> <div class="item">Flex Item 3</div> </div>
.container {
display: flex;
}
.item {
flex: 1;
}在上面的示例中，将 Flex Container 设置为 Flex Axis 为水平方向，将 Flex Items 的 flex-grow 属性设置为 1，即可实现等高布局。
两栏布局
CSS Flexbox 布局也可以实现两栏布局，其中一栏宽度固定，另一栏自适应宽度。
<div class="container"> <div class="sidebar">Sidebar</div> <div class="content">Content</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - -------- - ------ ------ - -------- - ----- -- -
在上面的示例中，将 Flex Container 设置为 Flex Axis 为水平方向，将 Sidebar 的宽度设置为固定值，将 Content 的 flex-grow 属性设置为 1，即可实现两栏布局。
结论
CSS Flexbox 布局是一种非常强大的布局方式，它可以轻松实现等高布局、两栏布局等常见布局。通过掌握 Flex Container 和 Flex Item 的属性，我们可以灵活地控制 Flex Items 的排列方式和对齐方式，实现各种复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6741a656ed0ec550d7223b48