什么是 Flexbox 布局？
Flexbox 布局是 CSS3 中的一个新布局模式，其目的是为了解决传统布局方式的一些限制，并提供更为灵活和高效的布局方式。使用 Flexbox 布局，我们可以更容易的实现响应式设计，并让页面在各种终端上都能够优雅地呈现。
如何使用 Flexbox 布局？
容器与项目
Flexbox 布局采用了一种比较特殊的方式，即将布局划分为容器和项目两个部分。容器是指我们需要进行布局的元素，而项目则是容器的子元素，也就是我们需要排布的内容。
在父元素上使用 display: flex; 即可将其设置为 Flexbox 容器，此后子元素都可以成为 Flexbox 项目。
以下是一个简单的示例：
<div class="container"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div> </div>
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: #f00;
}通过上述代码，我们可以让 container 元素成为 Flexbox 容器，并设置子元素为项目，运行代码后可以看到三个红色正方形排列在一行中。
排列方式（flex-direction）
Flexbox 布局中的排列方式（flex-direction）有以下四种：
- row：默认方式，表示从左到右的水平排列方式；
- row-reverse：从右到左的水平排列方式；
- column：从上到下的垂直排列方式；
- column-reverse：从下到上的垂直排列方式。
我们可以通过在容器上设置 flex-direction 属性，来决定项目的排列方式。
以下是一个简单的示例：
<div class="container row"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------ ------ ------- ------ ----------------- ----- - ---- - --------------- ---- - ------------ - --------------- ------------ - ------- - --------------- ------- - --------------- - --------------- --------------- -
在上述代码中，我们设置了四种不同的排列方式，分别为从左到右、从右到左、从上到下、从下到上。通过在容器上设置不同的类名，即可实现不同的排列方式。
对齐方式（justify-content 和 align-items）
Flexbox 布局中的对齐方式有以下两种：
- justify-content：表示项目在主轴（水平方向）上的对齐方式；
- align-items：表示项目在交叉轴（垂直方向）上的对齐方式。
我们可以通过在容器上设置 justify-content 和 align-items 属性，来实现不同的对齐方式。
以下是一个示例：
<div class="container align-center justify-center"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ ------- --- ----- ----- - ----- - ------ ------ ------- ------ ----------------- ----- - ------------ - ------------ ----------- - ---------- - ------------ --------- - ------------- - ------------ ------- - -------------- - ---------------- ----------- - ------------ - ---------------- --------- - --------------- - ---------------- ------- - ------------- - ---------------- ------------- - -------------- - ---------------- -------------- -
在上述代码中，我们设置了不同的对齐方式，分别为垂直居中、水平居中、垂直居上、垂直居下、水平居左、水平居右、等间距对齐、等间隔对齐。通过在容器上设置不同的类名，即可实现不同的对齐方式。
响应式设计
使用 Flexbox 布局可以轻松地实现响应式设计。我们只需要在不同的媒体查询下，改变容器或项目的属性即可实现不同的布局方式。
以下是一个示例：
<div class="container"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
----- -
----------- -------
------- ------
----------------- -----
-
------ ------ --- ----------- ------ -
----- -
----------- ----
-
-
------ ------ --- ----------- ------ -
----- -
----------- -----
-
-在上述代码中，我们设置了三个不同的媒体查询：在小屏幕（<= 576px）下，将项目的宽度占据整个容器，实现垂直排列；在中等屏幕（<= 768px）下，将项目的宽度占据一半，实现两列排列；在大屏幕下，将项目的宽度均分成三个部分，实现三列排列。
总结
使用 Flexbox 布局可以比传统布局方式更容易实现响应式设计，并且可以让页面在各种终端上都能够优雅地呈现。在实际开发中，我们可以根据需求来灵活地调整 Flexbox 布局的属性，从而实现各种复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645763e9968c7c53b0a1cc07