在前端开发中，页面排版是一个很重要的问题。而使用 Flexbox 布局可以让排版更加简单和灵活，尤其在同时存在文本和图片的情况下，Flexbox 更是能够提供一种终极的解决方案。
什么是 Flexbox 布局？
Flexbox（Flexible Box）是 CSS3 新增的布局模式，它将盒模型看成是一个弹性容器（flex container）和其中的弹性项目（flex item）的集合体。通过在容器上设置弹性子元素的属性，我们可以实现非常灵活的排版和布局效果。
如何使用 Flexbox 布局？
在使用 Flexbox 布局之前，我们需要先将容器（通常为某个 div 元素）设置为 Flexbox 容器，只需在它的样式属性中加上 display: flex; 即可。
接着，我们可以在容器中设置子元素（例如各个文本、图片等）的排版方式，常用的属性包括：
flex-direction：决定项目的排列方向，可以是 row（水平方向）、column（垂直方向）等。flex-wrap：如果一行放不下所有项目，是否允许其换行。justify-content：定义项目在主轴上的对齐方式，可以是 start、center、end 等。align-items：定义项目在交叉轴（与主轴垂直的轴）上的对齐方式，可以是 stretch（填满）、center、flex-start 等。
例如，下面的代码实现了将三个不同大小的图片并排放在一起。
<div id="container">
<img src="1.jpg" alt="image1">
<img src="2.jpg" alt="image2">
<img src="3.jpg" alt="image3">
</div>
<style>
#container {
display: flex;
justify-content: space-around;
align-items: center;
}
img {
width: 100px;
height: auto;
}
</style>在该代码中，我们将容器设置为 Flexbox 容器，并将子元素图片的宽度固定为 100px，高度则自动等比缩放。设置 justify-content: space-around; 和 align-items: center; 让图片在容器中均匀分布，并垂直居中。
Flexbox 布局的应用实例——文本与图片的排版
那么，如果我们需要在页面中同时展示文本和图片，并希望它们能够灵活排版和对齐呢？让我们看一下下面的实例代码。
<div id="container">
<div class="item">
<img src="image.png" alt="image">
<p>这是一段描述文字</p>
</div>
<div class="item">
<p>这是一段描述文字</p>
<img src="image.png" alt="image">
</div>
<div class="item">
<img src="image.png" alt="image">
<img src="image.png" alt="image">
<p>这是一段描述文字</p>
</div>
</div>
<style>
#container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.item {
margin: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
img {
width: 120px;
height: auto;
margin-right: 20px;
}
p {
margin: 0;
font-size: 18px;
}
</style>在上面的代码中，我们使用 Flexbox 布局将文本和图片放在一个弹性容器中。通过设置容器的 justify-content、align-items 和 flex-wrap 属性，我们可以让子元素自动居中、均匀分布且自动换行。同时，在子元素的样式设置中，我们将其也设置为弹性元素，并通过调整图像的宽度和高度、排版顺序等属性，使整个排版看起来更加美观。
总结
使用 Flexbox 布局不仅让前端开发者在文本和图片排版中更加轻松和灵活，而且还可以为页面布局带来许多新的创意和可能。虽然学习和掌握 Flexbox 布局需要花费一些时间和努力，但它的效果会让你所付出的努力和成果倍加值得。期望本文对你有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b1e1f4add4f0e0ffb145f1