Flexbox 是 CSS3 中一种新的布局模型，它可以帮助开发者更加方便、灵活地布局网页元素。在过去，前端开发者需要使用 float、position 等属性来实现页面布局，但这些方法可能会导致一些问题，比如难以实现垂直居中、难以处理多列等问题。Flexbox 就是为了解决这些问题而生的。
Flexbox 布局是什么？
Flexbox 布局是一种基于“弹性盒子”的布局方式，它可以让我们更加方便地实现网页元素的布局和排列。在 Flexbox 布局中，我们可以通过设置容器的属性来控制子元素的排列方式，比如水平居中、垂直居中、等分列等。同时，Flexbox 布局也支持响应式设计，可以根据屏幕尺寸自适应调整布局。
Flexbox 布局是如何工作的？
在 Flexbox 布局中，我们需要将网页元素放在一个容器中，并通过设置容器的属性来控制子元素的排列方式。下面是一些常用的属性：
display: flex：将容器设置为弹性盒子。flex-direction：设置子元素的排列方向，可以是 row（水平方向）、column（垂直方向）等。justify-content：设置子元素在主轴上的对齐方式，可以是 flex-start（默认值，左对齐）、center（居中对齐）等。align-items：设置子元素在交叉轴上的对齐方式，可以是 flex-start（顶部对齐）、center（居中对齐）等。flex-wrap：设置子元素是否换行，可以是 nowrap（默认值，不换行）、wrap（换行）等。
下面是一个简单的示例代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- -------------- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ---- -展开代码
在这个例子中，我们将三个 div 元素放在了一个容器中，并将容器设置为弹性盒子。我们设置了容器的排列方向为 row，即水平排列，同时设置了子元素在主轴上的对齐方式为 space-between，即两端对齐。我们还设置了子元素在交叉轴上的对齐方式为 center，即居中对齐。最终，我们得到了一个三个等宽的红色方块，它们水平排列在容器中，并且两端对齐、居中对齐。
总结
Flexbox 布局是一种非常方便、灵活的布局方式，它可以帮助我们更加轻松地实现网页元素的排列和布局。同时，Flexbox 布局也支持响应式设计，可以根据屏幕尺寸自适应调整布局。在实际开发中，我们可以根据需要灵活运用 Flexbox 布局，来实现各种各样的网页布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fbceddd10417a22275f9da
