Flexbox 布局是一种非常强大的页面布局方式，它通过简单的 CSS 属性和值，可以帮助开发者快速而灵活地构建各种复杂的页面布局。而其中最关键的属性之一就是 flex 属性。本文将对 flex 属性进行详细地解读和介绍。
flex 属性的基本用法
flex 属性是一个简写属性，它包含了三个值：
.container {
flex: [flex-grow] [flex-shrink] [flex-basis];
}flex-grow：决定项目在剩余空间占比，即弹性伸缩子元素的放缩值。flex-shrink：指定项目在空间不足时，它该如何缩小。默认值是 1，即如果空间不足，元素会等比例缩小。flex-basis：指定项目的本来大小。默认值为 auto，即元素使用自身的大小。也可以设置成任意一个 CSS 单位，比如 50px、2em 等。
这三个属性均为可选项，如果不想在某一位置使用，则可以将该位置的值设为 auto 或忽略。
flex-grow 属性详解
flex-grow 属性用于描述弹性伸缩子元素在伸展过程中的比例。初始值为 0，表示没有比例可分配。
例如，一个容器内有三个弹性子元素，它们各自设置了 flex-grow 属性值为 1、2、3。这意味着当容器内有多余空间时：
- 第一个元素将占据剩余空间的 1/6；
- 第二个元素将占据剩余空间的 1/3；
- 第三个元素将占据剩余空间的 1/2。
.container {
display: flex;
}
.flex-item {
flex-grow: 1;
/* 或者：flex: 1; */
}在上面的代码中，.flex-item 元素的 flex-grow 属性设置为 1，表示将所有剩余空间平均分配给所有 .flex-item 元素。
flex-shrink 属性详解
flex-shrink 属性用于指定元素在空间不足时的缩小比例。默认值为 1，即在空间不足时元素会等比例缩小。
.container {
display: flex;
}
.flex-item {
flex-shrink: 2;
/* 或者：flex: 1 2; */
}在这个例子中，.flex-item 元素的 flex-shrink 属性设置为 2，表示在空间不足时该元素会比其他元素缩小得更快，即比例为 2:1。
flex-basis 属性详解
flex-basis 属性指定元素在默认情况下的大小。它可以接收像素、百分比和其他 CSS 单位，还可以使用 auto 关键字。
.container {
display: flex;
}
.flex-item {
flex-basis: 100px;
}在这个例子中，.flex-item 元素的 flex-basis 属性设置为 100px，表示该元素的默认大小为 100px。
flex 属性的常用组合
flex 属性是 flex-grow、flex-shrink、flex-basis 三个属性的简写属性。上面解释了这三个属性的作用，所以直接上例子。
flex: 1;
-- -------------------- ---- ------- ---------- - -------- ----- - ----------- - ----- -- - ----------- - ----- -- -
在这个例子中，.flex-item1 和 .flex-item2 的 flex 属性都设置为 1，表示这两个元素将平分容器所有剩余空间。
flex: 0 0 auto;
.container {
display: flex;
}
.flex-item {
flex: 0 0 auto;
}在这个例子中，.flex-item 元素的 flex 属性值为 0 0 auto，表示这个元素既不会伸展也不会缩小，并且会依据其本身的大小显示。
flex: 2 2 200px;
.container {
display: flex;
}
.flex-item {
flex: 2 2 200px;
}在这个例子中，.flex-item 元素的 flex 属性值为 2 2 200px，表示这个元素在空间不足时，会比容器内其他元素更快地缩小，并且其默认大小为 200px。
总结
在本文中，我们详细地解析了 flex 属性的使用方法和作用。它是实现页面布局的重要工具之一，通过合理运用 flex 属性的组合，我们可以轻松构建出各种复杂的弹性布局。期望通过本文的介绍，您能够更好地掌握使用 flex 属性进行页面布局的技巧，发挥其中的优点，打造出良好的 UI 设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f85bfbf6b2d6eab30729b1