css flex属性 — glow、shrink、basis详解，突破 CSS 布局瓶颈
2024-01-30 07:28:10
在前端面试中，CSS flex属性是经常会被问到的重点考点之一。其中一个经典问题是：列出两个具有 flex 属性值的子盒子，并在面试中被要求解释其中宽度变化的原理。如果能熟练掌握 flex 属性及其子属性，包括 glow、shrink 和 basis，您就能突破 CSS 布局的瓶颈，成为一名布局高手。
一、Flex 属性基础
Flex 属性是一种布局模式，可以为元素提供更强大的排列方式，它可以使元素在父元素中水平或垂直排列，并根据容器的尺寸自动调整元素的尺寸。flex 属性包括三个子属性，分别为：
-
flex-grow： 控制元素的增长比例。默认值为 0，表示元素不会增长。当值为大于 0 的数字时，表示元素将根据其增长比例在剩余空间中增长。
-
flex-shrink： 控制元素的收缩比例。默认值为 1，表示元素会根据其收缩比例在空间不足时收缩。当值为小于 1 的数字时，表示元素将根据其收缩比例在空间不足时收缩。
-
flex-basis： 定义元素的初始大小。默认值为 auto，表示元素的初始大小由其内容决定。当值为特定长度时，表示元素的初始大小由该长度指定。
二、Flex 属性在实践中的应用
- 水平排列元素：
.container {
display: flex;
flex-direction: row;
}
.item {
flex: 1;
}
在这个例子中，.container 元素是一个 flex 容器，.item 元素是其子元素。flex-direction: row 表示 .item 元素将在容器中水平排列。flex: 1 意味着每个 .item 元素都将根据其增长比例在剩余空间中增长。
- 垂直排列元素：
.container {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
}
在这个例子中，.container 元素是一个 flex 容器，.item 元素是其子元素。flex-direction: column 表示 .item 元素将在容器中垂直排列。flex: 1 意味着每个 .item 元素都将根据其增长比例在剩余空间中增长。
- 控制元素的增长和收缩：
.container {
display: flex;
flex-direction: row;
}
.item1 {
flex: 2;
}
.item2 {
flex: 1;
}
在这个例子中，.container 元素是一个 flex 容器，.item1 和 .item2 元素是其子元素。flex: 2 表示 .item1 元素将在剩余空间中增长两倍，而 flex: 1 表示 .item2 元素将在剩余空间中增长一倍。
- 定义元素的初始大小：
.container {
display: flex;
flex-direction: row;
}
.item1 {
flex: 1;
flex-basis: 100px;
}
.item2 {
flex: 1;
flex-basis: 200px;
}
在这个例子中，.container 元素是一个 flex 容器，.item1 和 .item2 元素是其子元素。flex-basis: 100px 表示 .item1 元素的初始大小为 100 像素，而 flex-basis: 200px 表示 .item2 元素的初始大小为 200 像素。
三、flex 属性的进阶应用
- 创建响应式布局：
.container {
display: flex;
flex-direction: row;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
在这个例子中，.container 元素是一个 flex 容器，其子元素将在较大的屏幕上水平排列，而在较小的屏幕上垂直排列。
- 创建网格布局：
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
flex: 1;
}
在这个例子中，.container 元素是一个 flex 容器，其子元素将在容器中水平排列，当空间不足时，子元素将自动换行。
四、总结
CSS flex 属性是一个强大的工具，它可以帮助您创建响应式、美观的网站布局。通过理解 flex 属性及其子属性，包括 glow、shrink 和 basis，您就可以轻松驾驭 CSS 布局，成为一名布局高手。
