Flexbox 布局是一种新的 CSS 布局模型。它允许开发者更加灵活地控制容器和子元素的布局方式。在 Flexbox 中，子元素可以自由地改变它们的宽度、高度、顺序和对齐方式。而其中一个重要的属性就是 flex。
什么是 flex 属性？
flex 属性是指定一个元素的伸缩性。在 Flexbox 布局中，每个子元素都会有默认的 flex 值，默认值为 0 1 auto。其中：
0：表示该元素不会被伸展。1：表示该元素会被伸展，但是不会超出剩余空间。auto：表示该元素的尺寸由内容决定。
我们可以通过更改这些值来实现特定的布局效果。flex 属性的值可以是一个数字或者一个由三个值组成的字符串，分别表示 [flex-grow] [flex-shrink] [flex-basis]。其中：
flex-grow：表示元素的伸展比例，是一个数字，越大则伸展的比例越大。flex-shrink：表示元素的收缩比例，是一个数字，越大则收缩的比例越大。flex-basis：表示元素的基础宽度，可以是一个像素值或者百分比值。
如何设定子元素的 flex 属性？
在 Flexbox 布局中，我们可以在容器中为每个子元素设定不同的 flex 属性值。下面是一个示例代码：
<div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ------- ------ - ----- - ------- ------ - ------ - ----- -- - ------ - ----- -- - ------ - ----- -- -
在上面的代码中，我们在 .item1、.item2 和 .item3 元素中分别设置了不同的 flex 属性。由于容器中还有其他的子元素，所以我们使用了 justify-content: space-between 来让它们在容器内水平方向上平均分布。同时使用 align-items: center 让子元素在垂直方向上居中对齐。最终的效果如下图所示：
上图中，.item2 元素的 flex 值是 .item1 和 .item3 的两倍，因此它会占据更多的剩余空间。
总结
在 Flexbox 布局中，子元素的 flex 属性可以帮助我们实现更加灵活和自由的布局方式。通过更改 flex 属性的值，我们可以让子元素在容器中按照我们希望的方式进行伸展和收缩。如果你想尝试更多的布局效果，请务必学习并掌握 flex 属性的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481b39248841e9894130a60