前言
Flexbox 布局是一种强大的 CSS 布局方式，且易于使用。它允许我们基于一个弹性容器来设置其子元素的方向、对齐方式、间距和尺寸。这使得我们可以轻松地在更改屏幕或窗口的大小时调整布局。
基础知识
在使用 Flexbox 布局时，有两个主要概念：弹性容器和弹性项。
弹性容器是一个包含弹性项的容器。它的属性会影响其所有子项的布局。
弹性项是弹性容器中的直接子元素。它们的排列顺序以及如何拉伸和对齐是由容器的属性决定的。
在 Flexbox 布局中，常用的属性有以下几个：
- display
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-grow，flex-shrink 和 flex-basis
如有需要，你可以查看 MDN Web Docs 上的 CSS Flexible Box Layout。
嵌套应用
Flexbox 布局在实现复杂布局时非常有用。由于可以嵌套使用，我们可以将多个布局组合在一起，以获得更加灵活和现代化的设计。
下面是一个简单的例子，在一个弹性容器中嵌套了另外一个弹性容器。
-- -------------------- ---- -------
---- ----------------
---- --------------------------
---- ------------------------
---- ------------------------
---- ------------------------
------
---- --------------------------
---- ------------------------
---- ------------------------
---- ------------------------
------
-------- -------------------- ---- ------- -------- - -------- ----- ---------- ----- - ------------------ - -------- ----- ---------------- ------- ------------ ------- ------- ----- ------- ------ ------ ------ ----------------- ----- - ---------- - ------- ----- ------ ----- ----------------- ----- ------- ---- -
在这个例子中，我们使用 flex-wrap 将弹性容器中的弹性项跨行或跨列进行布局。.wrapper 的 display 属性设置为 flex，使其成为一个弹性容器。每一个.flexbox-container 就是一个嵌套的子容器，可以在容器内部设置其他的布局，并且不会影响到外部容器。
每个.flexbox-container 具有相同的大小和样式。我们使用 justify-content 和 align-items 属性来控制它们的对齐方式。在这个例子中，我们想让各个子弹性容器水平居中对齐，于是使用了 justify-content: center 和 align-items: center。.flex-item 是子容器中的弹性项，大小和间距都已经设置好。
结论
Flexbox 布局是一种非常强大的 CSS 布局方式。它允许我们轻松地嵌套使用多个弹性容器，以实现复杂布局。在考虑使用 Flexbox 布局时，要确保你准确地理解嵌套布局的相关知识以及各个属性的具体用途。建议在实践之前，多多尝试和实验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67244b832e7021665e12f177