在前端开发中，常常会遇到元素换行时的对齐问题，例如一排图片，当其中一个图片高度不同，会导致下面的图片错位。这时候，Flexbox 就可以解决这个问题。
什么是 Flexbox
Flexbox 是 CSS3 引入的一种布局方式，适用于响应式设计和复杂的布局需求。它的核心就是弹性盒子，可以实现各种方向的元素排列，并且可以方便地进行对齐和分布。
Flexbox 的基本概念
在使用 Flexbox 布局之前，需要了解一些基本的概念。
- 容器（Container）：使用 Flexbox 布局的元素即为容器，可以使用
display: flex;或display: inline-flex;来使用该布局。 - 项目（Item）：容器内部的每一个元素就是一个项目，它们都可以使用 Flexbox 布局中的属性进行控制。
- 主轴（Main axis）和交叉轴（Cross axis）：容器内部的排列方向即为主轴，垂直于主轴的方向即为交叉轴。
- 父元素（Parent）和子元素（Child）：Flexbox 布局中通常使用父元素来控制项目的排列，子元素就是每一个项目。
Flexbox 的常用属性
下面列出了一些常用的 Flexbox 属性，这些属性可以帮助我们控制容器和项目的对齐和分布。
display: flex;或display: inline-flex;：用来启用 Flexbox 布局，可以将容器变成一个弹性盒子。flex-direction：用来控制项目的排列方向，有 row、row-reverse、column、column-reverse 四个值可选。justify-content：用来控制项目在主轴上的对齐方式，有 flex-start、flex-end、center、space-between、space-around 五个值可选。align-items：用来控制项目在交叉轴上的对齐方式，有 flex-start、flex-end、center、baseline、stretch 五个值可选。flex-wrap：用来控制项目的换行方式，有 nowrap、wrap、wrap-reverse 三个值可选。align-content：用来控制多行项目在交叉轴上的对齐方式，有 flex-start、flex-end、center、space-between、space-around、stretch 六个值可选。flex-grow：用来控制项目的放大比例，默认为 0，即不放大。flex-shrink：用来控制项目的缩小比例，默认为 1，即可以缩小。flex-basis：用来设置项目在主轴上的初始大小，默认为 auto。flex：是flex-grow、flex-shrink和flex-basis的简写形式，常用来简化布局代码。
示例代码
下面是一个以 Flexbox 布局实现图片对齐的示例代码：
<div class="container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> </div>
// www.javascriptcn.com code example
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
img {
margin-bottom: 10px; /* 设置下边距避免重叠 */
flex-basis: calc(20% - 10px); /* 计算每个图片宽度（20%减去下边距） */
}在这个示例中，我们使用 display: flex; 将容器变成了一个弹性盒子。然后，我们使用了 justify-content: space-between; 让图片在主轴上分布排列，并设置了 flex-wrap: wrap; 允许图片换行。接着，我们设置了每个图片的 flex-basis，并使用 calc() 函数计算出每个图片应有的宽度，最后就可以轻松地实现图片的对齐。
结语
Flexbox 虽然看起来有些复杂，但实际上使用起来非常简单，只需要了解一些基本的概念和常用属性就可以开始使用。希望本篇文章可以帮助大家解决元素换行时的对齐问题，并且能够在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6472ca941bf7134bfa8f7