什么是 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 来实现。
---------- - -------- ----- -
2. 定义主轴方向
接下来，我们需要定义 Flexbox 容器的主轴方向。可以使用 flex-direction 属性来实现。默认情况下，主轴是水平方向。
---------- - -------- ----- --------------- ---- -- ---- -- -
3. 定义项目的排列方式
接下来，我们需要定义项目在主轴上的排列方式。可以使用 justify-content 属性来实现。
---------- - -------- ----- --------------- ---- -- ---- -- ---------------- -------------- -- ---- -- -
4. 定义项目在交叉轴上的排列方式
最后，我们需要定义项目在交叉轴上的排列方式。可以使用 align-items 或 align-content 属性来实现。
---------- - -------- ----- --------------- ---- -- ---- -- ---------------- -------------- -- ---- -- ------------ ------- -- ---- -- -
Flexbox 的常用属性
Flexbox 布局中有许多常用的属性，下面我们来逐一介绍一下。
display
display 属性用来将一个元素变成 Flexbox 容器。
---------- - -------- ----- -
flex-direction
flex-direction 属性用来定义 Flexbox 容器的主轴方向。
---------- - --------------- ---- -- ---- -- --------------- ------- -- ---- -- --------------- ------------ -- ------ -- --------------- --------------- -- ------ -- -
justify-content
justify-content 属性用来定义项目在主轴上的排列方式。
---------- - ---------------- ----------- -- ---- -- ---------------- --------- -- ---- -- ---------------- ------- -- ---- -- ---------------- -------------- -- ---- -- ---------------- ------------- -- ---- -- ---------------- ------------- -- ---------- -- -
align-items
align-items 属性用来定义项目在交叉轴上的排列方式。
---------- - ------------ ----------- -- ---- -- ------------ --------- -- ---- -- ------------ ------- -- ---- -- ------------ -------- -- ---- -- ------------ --------- -- ---- -- -
align-content
align-content 属性用来定义多行项目在交叉轴上的排列方式。
---------- - -------------- ----------- -- ---- -- -------------- --------- -- ---- -- -------------- ------- -- ---- -- -------------- -------------- -- ---- -- -------------- ------------- -- ---- -- -------------- -------- -- ---- -- -
order
order 属性用来定义项目在弹性盒子中的排列顺序。
----- - ------ -- -- ----- - -- -
flex-grow
flex-grow 属性用来定义项目在剩余空间中的放大比例。
----- - ---------- -- -- ----- - -- -
flex-shrink
flex-shrink 属性用来定义项目在空间不足时的缩小比例。
----- - ------------ -- -- ----- - -- -
flex-basis
flex-basis 属性用来定义项目在主轴上的初始大小。
----- - ----------- ------ -- ----- ----- -- -
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。
----- - ----- - - ------ -- ----- ------- ------- ----- -- -
Flexbox 的实例
下面我们来看一些使用 Flexbox 布局实现的实例。
实例 1：水平居中
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------------- ------- - ----- - -------- ----- ----------------- ----- -
实例 2：垂直居中
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ------------ ------- ------- ------ - ----- - -------- ----- ----------------- ----- -
实例 3：两端对齐
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------------- -------------- - ----- - -------- ----- ----------------- ----- -
实例 4：垂直居中和两端对齐
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------------- -------------- ------------ ------- ------- ------ - ----- - -------- ----- ----------------- ----- -
总结
Flexbox 布局是一种非常实用的 CSS 布局模式，它可以让我们更方便地设计出复杂的页面布局。在使用 Flexbox 布局时，我们需要理解容器和项目、主轴和交叉轴、弹性盒子模型等基本概念，并掌握常用的属性和实现技巧。希望本文能够帮助你更好地掌握 Flexbox 布局技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663ca8d0d3423812e4a98b12