在前端开发中，CSS 布局是最基本也是最重要的技能之一。虽然 CSS 提供了多种布局方式，但是还是有一些场景使用传统的 CSS 布局无法解决。这时候就可以用 Flexbox 布局来解决这些问题。
什么是 Flexbox？
Flexbox 是 Flexible Box 的缩写，意为“灵活的盒子布局模型”，它是一个 CSS 模块，用于实现强大的、动态的布局。通过使用 Flexbox，我们可以创建出一些灵活且适应性强的布局方式。
Flexbox 最主要的特点就是可以适应容器的大小和元素垂直或水平方向上的间距分布等多变的布局需求。
Flexbox 和传统布局的区别
在传统布局中，我们使用的是基于盒子布局模型的 display 属性。通常我们使用的 display 属性是 block、inline 或 inline-block。
在 Flexbox 中，我们使用的是当 display 属性的值为 flex 或 inline-flex 时，元素将以弹性盒子模型显示。在弹性盒子布局中，我们可以使用伸缩容器及其子项的属性来实现更细粒度的布局控制。
Flexbox 相比于传统布局的主要优点有：
- 支持容器自适应、元素自适应
- 可以轻松地实现水平或竖直居中
- 具有更加精细的空间分配控制
Flexbox 的基本概念
在使用 Flexbox 布局前，我们需要了解一些基本概念：
容器和项目
在 Flexbox 布局中，我们把 Flexbox 的外层元素称为容器，内部元素称为项目。
<div class="container"> <div class="item"></div> <div class="item"></div> </div>
轴线和主轴
在 Flexbox 布局中，我们把容器与项目相交的那条直线称为轴线，而轴线的方向就是主轴。
主轴分为水平主轴和垂直主轴，它们的方向由容器的 flex-direction 属性决定。
伸缩容器和伸缩项目
在 Flexbox 布局中，我们把容器称为伸缩容器，而将项目称为伸缩项目。
主轴空间和交叉轴空间
在 Flexbox 布局中，我们把主轴方向上的空间称为主轴空间，而在垂直于主轴的方向上，则称为交叉轴空间。
如何使用 Flexbox
现在我们已经了解了一些基本概念，接下来我们来看看如何使用 Flexbox。
容器的属性
在 Flexbox 布局中，我们可以使用以下几个属性来控制容器的布局：
flex-direction
可以决定主轴方向是水平还是垂直，默认值是 row。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}- row：水平方向，起点在左端。
- row-reverse：水平方向，起点在右端。
- column：垂直方向，起点在上沿。
- column-reverse：垂直方向，起点在下沿。
justify-content
定义了在主轴上的对齐方式，其属性值决定了伸缩容器内各个伸缩项目在主轴方向上的对齐方式。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}- flex-start：在主轴起点对齐。
- flex-end：在主轴终点对齐。
- center：在主轴上居中对齐。
- space-between：在主轴上平均分配空间。
- space-around：在主轴上平均分配剩余空间，同时每个项目两侧的间距相等。
- space-evenly：在主轴上平均分配剩余空间，同时包括项目两侧的间距。
align-items
定义了在交叉轴上的对齐方式。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}- flex-start：在交叉轴起点对齐。
- flex-end：在交叉轴终点对齐。
- center：在交叉轴上居中对齐。
- baseline：对齐项目的文字基线。
- stretch：在交叉轴上拉伸对齐项目。
flex-wrap
设置换行方式，当容器宽度不足时，是否允许项目换行。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}- nowrap：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
align-content
定义了在交叉轴上，伸缩容器内各行之间的间距。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}- flex-start：在交叉轴起点对齐。
- flex-end：在交叉轴终点对齐。
- center：在交叉轴上居中对齐。
- space-between：在交叉轴上平均分配空间。
- space-around：在交叉轴上平均分配剩余空间，同时每个项目两侧的间距相等。
- stretch：伸缩容器占据整个交叉轴空间。
项目的属性
在 Flexbox 布局中，我们也可以使用以下几个属性来控制项目的布局。
flex-grow
定义了伸缩项目的放大比例，默认值为 0，即当存在剩余空间时，也不会放大。
.item {
flex-grow: <number>; /* default 0 */
}flex-shrink
定义了伸缩项目的缩小比例，默认值为 1，即当空间不足时，将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}flex-basis
在排列方向上，项目的初始尺寸。
.item {
flex-basis: <length> | auto; /* default auto */
}flex
该属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto。
.item {
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}order
使用 order 定义伸缩项目的显示顺序。数值越小，伸缩项目越靠前，默认值为 0。
.item {
order: <integer>; /* default 0 */
}align-self
在交叉轴上单独定义伸缩项目的对齐方式。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}一个示例
下面通过一个实例来演示如何使用 Flexbox 布局。
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- ------------ ------- - ----- - ------ ------ ------- ----- ----------------- ----- ------------ ----- ----------- ------- ------- ----- -
这个示例的效果如下图所示：
在这个示例中，我们使用了 Flexbox 布局，通过设置容器的属性，实现了自适应容器宽度，同时在不同视口宽度下，自动调整项目的宽度和高度，让整个布局更灵活，更加美观。
总结
通过这篇文章，我们了解了什么是 Flexbox 布局，它和传统布局的区别，以及如何使用 Flexbox 布局。同时，我们还提供了一个实例，来展示如何实现更加灵活的、美观的布局方式。
掌握了 Flexbox 布局之后，我们可以更加轻松地实现各种形式和样式的布局方式。希望这篇文章可以对广大前端工程师有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6473f1ce968c7c53b0168cea