什么是 Flexbox？
Flexbox 是 CSS3 中新增的一种布局模式，可以让我们轻松地实现复杂的布局效果，尤其适用于响应式设计、移动端布局等场景。
Flexbox 布局是基于弹性盒子的概念，通过设置一些属性和属性值，实现灵活的布局方式。相比于传统的盒子模型，Flexbox 布局更具有适应性，可以轻松实现多列、多行，甚至多层嵌套的布局效果。
Flexbox 属性
接下来，我们来详细介绍一下 Flexbox 布局中的主要属性，以及它们的作用。
display
display 属性可以控制一个元素是否使用 Flexbox 布局。要使用 Flexbox 布局，只需要将 display 属性设置为 flex 即可。
.container {
display: flex;
}flex-direction
flex-direction 属性用来指定 Flexbox 的主轴方向，它决定了 Flexbox 元素排列的方向。默认值是 row，表示主轴横向排列，即从左到右。
.container {
flex-direction: column;
}justify-content
justify-content 属性用来指定 Flexbox 元素在主轴上的对齐方式，即控制 Flexbox 元素在主轴上的间距和对齐方式。
.container {
justify-content: center;
}align-items
align-items 属性用来指定 Flexbox 元素在侧轴上的对齐方式，即控制 Flexbox 元素在侧轴上的间距和对齐方式。
.container {
align-items: center;
}flex-wrap
flex-wrap 属性用来指定 Flexbox 元素是否换行。默认情况下，Flexbox 元素是不换行的，即 nowrap。
.container {
flex-wrap: wrap;
}align-content
align-content 属性用来指定多行 Flexbox 元素的对齐方式，即控制多行 Flexbox 元素在侧轴上的间距和对齐方式。
.container {
align-content: center;
}flex-grow
flex-grow 属性用来指定 Flexbox 元素的放大比例，即如果容器有多余的空间，Flexbox 元素的尺寸可以按照比例进行放大。
.item {
flex-grow: 1;
}flex-shrink
flex-shrink 属性用来指定 Flexbox 元素的缩小比例，即如果容器空间不足，Flexbox 元素的尺寸可以按照比例进行缩小。
.item {
flex-shrink: 1;
}flex-basis
flex-basis 属性用来指定 Flexbox 元素的初始尺寸。
.item {
flex-basis: 100px;
}应用示例
下面是一个基本的 Flexbox 布局示例：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ----- - ----------- ------ ---------- -- ------------ -- ----------------- -------- ------- ----- ----------- ------- -
这段代码实现了以下效果：
结语
Flexbox 布局是一种非常强大、灵活、易于使用的布局方式。如果你想要提高前端布局能力，那么一定要掌握好这一技能。希望本文对你有所帮助，祝你学习愉快！
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780c5b2ce7f4861254878b0