Flexbox 是一种前端布局方式，它可以轻松地实现响应式布局，让页面在不同的设备上得到更好的显示效果。在本篇文章中，我们将从 Flexbox 的基本概念入手，深入了解其应用场景以及如何在实际开发中使用它。
基本概念
Flexbox 的基本思想是，将容器里的子元素按照一定的规则排列。在 Flexbox 中，存在两个重要的概念：容器和项目。
容器是包含项目的元素，可以通过设置容器的属性来控制项目的排列方式。项目则是容器中排列的元素，可以通过设置项目的属性实现自身的布局。
Flexbox 最常用的属性有以下五个：
flex-direction：设置项目的排列方向，可以取值为row、row-reverse、column、column-reverse，默认为row。justify-content：设置项目在主轴上的对齐方式，可以取值为flex-start、flex-end、center、space-between、space-around、space-evenly。align-items：设置项目在交叉轴上的对齐方式，可以取值为flex-start、flex-end、center、baseline、stretch。flex-wrap：设置项目是否在多行显示，可以取值为nowrap、wrap、wrap-reverse。flex-grow：设置项目在剩余空间中所占比例，接受一个非负数，默认为 0。
了解了这些基本属性之后，我们来看一些实际的应用场景。
实际应用
等高布局
Flexbox 可以轻松实现等高布局，即每个项目的高度都相等，不论其内容多少。
<div class="parent"> <div class="child">项目1</div> <div class="child">项目2</div> <div class="child">项目3</div> </div>
-- -------------------- ---- ------- ------- - -------- ----- ---------- ----- ---------------- -------------- ------------ -------- - ------ - ----------- ---------- - ------ -
在这里，我们将容器的 justify-content 属性设置为 space-between，这样每个项目的左右间隔就相等了。为了让项目等高，我们将容器的 align-items 属性设置为 stretch。同时，我们还将项目的 flex-basis 属性设置为 calc(33.3% - 10px)，该值表示每个项目占据父容器的 1/3 宽度，并减去左右间隔的总和。
点赞布局
Flexbox 可以实现适配不同屏幕宽度的点赞布局，让页面在手机和电脑上都得到良好的显示效果。
<div class="parent">
<div class="child icon">
<i class="fas fa-heart"></i>
</div>
<div class="child text">点赞</div>
</div>-- -------------------- ---- ------- ------- - -------- ----- ------------ ------- - ----------------------- - ------------- ----- - ----- - ---------- ----- -
在这个布局中，我们将容器的 display 属性设置为 flex，并设置其 align-items 属性为 center，以让图标和文本水平居中对齐。接着，我们将每个项目的 margin-right 属性设置为 10px，以在每两个项目之间留出 10px 的空隙。最后，我们将文本的 font-size 属性设置为 14px，以适配手机和电脑端的不同字体大小。
总结
本文介绍了 Flexbox 的基本概念以及在实际开发中的应用场景。对于前端开发者而言，熟练掌握 Flexbox 的使用，将会为开发响应式布局带来很大的帮助。因此，我们在实际开发中也要多加练习和尝试，以提高自己的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470980c968c7c53b0ebbbd5