什么是 Flexbox？
Flexbox 是一种 CSS 布局模式，它可以让我们更容易地设计出复杂的页面布局。它的全称为 Flexible Box Layout，中文翻译为“弹性盒子布局”。
Flexbox 最初是为了解决传统布局模式（比如 float 和 position）所带来的问题而被引入的。它可以让我们更方便地定义容器和项目之间的关系，从而实现响应式布局和灵活的排版。
Flexbox 的基本概念
在使用 Flexbox 布局时，我们需要理解以下几个基本概念：
容器和项目
Flexbox 布局有两个主要的概念：容器和项目。
容器是指包含项目的元素，它的属性会影响到项目的排列方式。在 CSS 中，我们可以使用 display: flex 或 display: inline-flex 将一个元素变成 Flexbox 容器。
项目是指容器中的子元素，它们的排列方式受到容器属性的影响。我们可以使用一系列的属性来控制项目的排列方式，比如 order、flex-grow、flex-shrink 和 flex-basis。
主轴和交叉轴
Flexbox 布局中有两个重要的轴线：主轴和交叉轴。
主轴是指 Flexbox 容器的主要方向，它的方向可以通过 flex-direction 属性来控制。默认情况下，主轴是水平方向，从左到右排列。
交叉轴是指与主轴垂直的方向，它的方向和长度受到容器的大小和主轴方向的影响。我们可以使用 align-items 和 align-content 属性来控制交叉轴上项目的排列方式。
弹性盒子模型
Flexbox 布局中的项目都是基于弹性盒子模型进行排列的。这个模型由以下几个部分组成：
- 一个弹性容器（Flex Container）：包含了一系列的弹性项目，它们一起组成了一个弹性盒子。
- 一个主轴（Main Axis）：沿着弹性容器的主方向进行排列。
- 一个交叉轴（Cross Axis）：与主轴垂直，用来控制项目在交叉轴上的排列方式。
- 弹性项目（Flex Item）：它们是弹性盒子中的子元素，可以被排列在主轴或交叉轴上。
如何使用 Flexbox？
在使用 Flexbox 布局时，我们需要遵循以下几个步骤：
1. 创建一个 Flexbox 容器
首先，我们需要将一个元素变成 Flexbox 容器。可以使用 display: flex 或 display: inline-flex 来实现。
.container {
display: flex;
}2. 定义主轴方向
接下来，我们需要定义 Flexbox 容器的主轴方向。可以使用 flex-direction 属性来实现。默认情况下，主轴是水平方向。
.container {
display: flex;
flex-direction: row; /* 水平方向 */
}3. 定义项目的排列方式
接下来，我们需要定义项目在主轴上的排列方式。可以使用 justify-content 属性来实现。
.container {
display: flex;
flex-direction: row; /* 水平方向 */
justify-content: space-between; /* 两端对齐 */
}4. 定义项目在交叉轴上的排列方式
最后，我们需要定义项目在交叉轴上的排列方式。可以使用 align-items 或 align-content 属性来实现。
.container {
display: flex;
flex-direction: row; /* 水平方向 */
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
}Flexbox 的常用属性
Flexbox 布局中有许多常用的属性，下面我们来逐一介绍一下。
display
display 属性用来将一个元素变成 Flexbox 容器。
.container {
display: flex;
}flex-direction
flex-direction 属性用来定义 Flexbox 容器的主轴方向。
.container {
flex-direction: row; /* 水平方向 */
flex-direction: column; /* 垂直方向 */
flex-direction: row-reverse; /* 反向水平方向 */
flex-direction: column-reverse; /* 反向垂直方向 */
}justify-content
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
align-items 属性用来定义项目在交叉轴上的排列方式。
.container {
align-items: flex-start; /* 起点对齐 */
align-items: flex-end; /* 终点对齐 */
align-items: center; /* 居中对齐 */
align-items: stretch; /* 拉伸对齐 */
align-items: baseline; /* 基线对齐 */
}align-content
align-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 属性用来定义项目在弹性盒子中的排列顺序。
.item {
order: 1; /* 排列顺序为 1 */
}flex-grow
flex-grow 属性用来定义项目在剩余空间中的放大比例。
.item {
flex-grow: 1; /* 放大比例为 1 */
}flex-shrink
flex-shrink 属性用来定义项目在空间不足时的缩小比例。
.item {
flex-shrink: 1; /* 缩小比例为 1 */
}flex-basis
flex-basis 属性用来定义项目在主轴上的初始大小。
.item {
flex-basis: 100px; /* 初始大小为 100px */
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。
.item {
flex: 1 1 100px; /* 放大比例为 1，缩小比例为 1，初始大小为 100px */
}Flexbox 的实例
下面我们来看一些使用 Flexbox 布局实现的实例。
实例 1：水平居中
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ----- - -------- ----- ----------------- ----- -
实例 2：垂直居中
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ - ----- - -------- ----- ----------------- ----- -
实例 3：两端对齐
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - -------- ----- ----------------- ----- -
实例 4：垂直居中和两端对齐
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ------- ------ - ----- - -------- ----- ----------------- ----- -
总结
Flexbox 布局是一种非常实用的 CSS 布局模式，它可以让我们更方便地设计出复杂的页面布局。在使用 Flexbox 布局时，我们需要理解容器和项目、主轴和交叉轴、弹性盒子模型等基本概念，并掌握常用的属性和实现技巧。希望本文能够帮助你更好地掌握 Flexbox 布局技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663ca8d0d3423812e4a98b12