Flexbox 布局（也称为伸缩盒布局）是一种现代的 CSS 布局方式，它使得在不同屏幕大小和设备上构建灵活和响应式网站变得更加容易。其中最重要的一点就是让子元素可以自适应宽度和高度，使得排版更加灵活和易于实现。
在本文中，我们将讨论如何在 Flexbox 布局中实现子元素自适应宽度和高度。
如何在 Flexbox 布局中设置子元素的自适应宽度
在 Flexbox 布局中，我们可以使用 flex-grow 属性来设置子元素的自适应宽度。该属性指定了子元素在空间分配上的比例。默认情况下，所有的子元素的 flex-grow 属性值都是 0，这意味着它们只会占据必要的空间。当某个子元素的 flex-grow 属性值大于 0 时，它会根据比例分配剩余的空间。
下面是一个示例代码片段，其中两个子元素的 flex-grow 属性分别为 1 和 2：
-- -------------------- ---- ------- ---------- - -------- ----- - ------- - ---------- -- - ------- - ---------- -- -
在上面的代码中，.item-1 元素会占据一半的宽度，而 .item-2 元素会占据两倍的宽度。
另外，在进行自适应宽度的设置时，还需要考虑 Flexbox 布局中的 flex-shrink 和 flex-basis 属性。其中，flex-shrink 指定了当空间不足时，子元素的缩小比例；flex-basis 指定了子元素的基准宽度。
如何在 Flexbox 布局中设置子元素的自适应高度
在 Flexbox 布局中设置子元素的自适应高度相对于设置宽度来说要困难一些。这是因为 Flexbox 布局中的高度主要是由父容器的高度决定的。因此，我们需要使用类似以下的技巧来实现子元素的自适应高度。
.container {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
}在上面的代码中，我们通过将 .container 元素的 flex-direction 属性设置为 column，使得其成为一个垂直方向的 Flexbox 容器。然后，我们通过将所有子元素 .item 的 flex 属性设置为 1 来平均分配父容器的高度。
此外，我们还可以使用带有 max-height 属性的 Flexbox 布局来实现高度自适应。
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- - ----- - ----- -- ----------- ----- -
在上面的代码中，我们将 .item 元素的 max-height 属性设置为 100%，使其可以根据父容器的高度自适应。
结论
Flexbox 布局使得在前端开发中实现自适应宽度和高度变得更加容易。我们可以使用 flex-grow 属性设置子元素的自适应宽度，并通过类似于 flex-direction 和 flex 的属性来实现自适应高度。
当然，需要注意的是，这些技巧是在对 Flexbox 布局的深入学习中才能领会，并且需要在实际开发中进行多次试验和优化才能更好的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671db29f9babaf620fb7a9a4