什么是 Flexbox 布局？
Flexbox 是一种用于布局的 CSS3 模块，它可以轻松地实现响应式布局，使得页面元素在不同屏幕尺寸下能够自适应地排列。它的全称是 Flexible Box Layout，意为弹性布局。
Flexbox 布局的特点是灵活性和自适应性。它可以让元素在容器中的分布更加灵活，可以轻松地实现元素的水平和垂直居中、等高布局等常见布局需求。
Flexbox 布局的基本概念
在了解 Flexbox 布局之前，需要先了解一些基本概念：
- Flex Container（容器）： 容器是指应用 Flexbox 布局的元素，它的
display属性值为flex或inline-flex。 - Flex Item（项目）： 项目是指容器内被应用 Flexbox 布局的元素，它们的布局是基于容器的。
- Main Axis（主轴）： 主轴是指容器的主要方向，可以是水平方向或垂直方向。默认情况下，主轴是水平方向，即
flex-direction: row。 - Main Start / Main End（主轴起点 / 主轴终点）： 主轴起点是指容器内项目的起点，主轴终点是指容器内项目的终点。在默认情况下，主轴起点在左侧，主轴终点在右侧（即从左到右排列）。
- Cross Axis（交叉轴）： 交叉轴是指与主轴垂直的方向。默认情况下，交叉轴是垂直方向，即
flex-direction: row。 - Cross Start / Cross End（交叉轴起点 / 交叉轴终点）： 交叉轴起点是指容器内项目的起点，交叉轴终点是指容器内项目的终点。在默认情况下，交叉轴起点在顶部，交叉轴终点在底部（即从上到下排列）。
Flex Container 的属性
下面是一些常用的 Flex Container 属性：
display
设置元素为 Flex Container。
.container {
display: flex;
}flex-direction
设置主轴方向。
.container {
flex-direction: row; /* 水平方向（默认值）*/
flex-direction: column; /* 垂直方向 */
}flex-wrap
设置项目是否换行。
.container {
flex-wrap: nowrap; /* 不换行（默认值）*/
flex-wrap: wrap; /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */
}justify-content
设置项目在主轴上的对齐方式。
.container {
justify-content: flex-start; /* 默认值，左对齐 */
justify-content: flex-end; /* 右对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐，项目之间的间隔相等 */
justify-content: space-around; /* 每个项目两侧的间隔相等 */
justify-content: space-evenly; /* 每个项目的间隔相等 */
}align-items
设置项目在交叉轴上的对齐方式。
.container {
align-items: stretch; /* 默认值，拉伸对齐 */
align-items: flex-start; /* 顶部对齐 */
align-items: flex-end; /* 底部对齐 */
align-items: center; /* 居中对齐 */
align-items: baseline; /* 基线对齐 */
}align-content
设置多行项目在交叉轴上的对齐方式。
-- -------------------- ---- ------- ---------- - -------------- -------- -- -------- -- -------------- ----------- -- ---- -- -------------- --------- -- ---- -- -------------- ------- -- ---- -- -------------- -------------- -- -------------- -- -------------- ------------- -- ----------- -- -------------- ------------- -- --------- -- -
Flex Item 的属性
下面是一些常用的 Flex Item 属性：
flex-grow
设置项目的放大比例。
.item {
flex-grow: 1; /* 默认值为 0，不放大 */
}flex-shrink
设置项目的缩小比例。
.item {
flex-shrink: 1; /* 默认值为 1，可缩小 */
}flex-basis
设置项目的基准大小。
.item {
flex-basis: auto; /* 默认值，根据内容自动计算 */
flex-basis: 100px; /* 固定大小 */
flex-basis: 50%; /* 相对大小 */
}flex
是 flex-grow、flex-shrink 和 flex-basis 的缩写。
.item {
flex: 1 1 auto; /* 默认值 */
flex: 1 0 auto; /* 禁止缩小 */
}order
设置项目的排列顺序。
.item {
order: 0; /* 默认值，按照原始顺序排列 */
order: 1; /* 排在后面 */
}Flexbox 布局的示例代码
下面是一个简单的 Flexbox 布局示例代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ----- -- ----------- ------- ---------- ----- ----------------- ----- ------- - ----- -
这个示例代码实现了三个项目在水平方向上居中对齐，并且在垂直方向上也居中对齐。每个项目的大小相等，间隔为 1rem。在不同屏幕尺寸下，这个布局可以自适应地调整。
总结
Flexbox 布局是一种非常实用的 CSS 布局方式，它可以轻松地实现响应式布局和常见布局需求。掌握了 Flexbox 布局的基本概念和常用属性，就可以轻松地应对各种布局需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66384cdcd3423812e464e959