Appearance
第9章：项目尺寸控制
在Flex布局中，我们可以通过 flex-grow、flex-shrink 和 flex-basis 属性来控制项目的尺寸，实现更加灵活的空间分配。
9.1 flex-grow：项目的放大比例
flex-grow 属性控制项目在容器有剩余空间时的放大比例。
默认值
- 默认值：0（不放大，保持自身尺寸）
- 数值越大，占据的剩余空间越多
用法
css
.item {
flex-grow: <number>;
}代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>flex-grow 示例</title>
<style>
.container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
margin: 5px;
border-radius: 4px;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 1;
}
</style>
</head>
<body>
<h1>flex-grow 示例</h1>
<div class="container">
<div class="item item1">flex-grow: 1</div>
<div class="item item2">flex-grow: 2</div>
<div class="item item3">flex-grow: 1</div>
</div>
<p>容器的剩余空间按 1:2:1 的比例分配给三个项目</p>
</body>
</html>9.2 flex-shrink：项目的缩小比例
flex-shrink 属性控制项目在容器空间不足时的缩小比例。
默认值
- 默认值：1（溢出时自动缩小）
- 数值越大，缩小的比例越大
- 设置为 0 时，项目不会缩小
用法
css
.item {
flex-shrink: <number>;
}代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>flex-shrink 示例</title>
<style>
.container {
display: flex;
width: 300px;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.item {
width: 120px;
background-color: #3498db;
color: white;
padding: 20px;
margin: 5px;
border-radius: 4px;
}
.item1 {
flex-shrink: 1; /* 默认值 */
}
.item2 {
flex-shrink: 0; /* 不缩小 */
}
.item3 {
flex-shrink: 2; /* 缩小比例更大 */
}
</style>
</head>
<body>
<h1>flex-shrink 示例</h1>
<div class="container">
<div class="item item1">flex-shrink: 1</div>
<div class="item item2">flex-shrink: 0</div>
<div class="item item3">flex-shrink: 2</div>
</div>
<p>容器宽度 300px，三个项目总宽度超过容器宽度，item2 不缩小，item3 缩小比例更大</p>
</body>
</html>9.3 flex-basis：项目在主轴上的初始尺寸
flex-basis 属性设置项目在主轴上的初始尺寸，默认值为 auto。
与width/height的区别
flex-basis优先级高于width/height- 当设置了
flex-basis时，项目的初始尺寸由flex-basis决定 flex-basis: auto时，项目的初始尺寸由width/height决定
用法
css
.item {
flex-basis: <length> | auto;
}代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>flex-basis 示例</title>
<style>
.container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
margin: 5px;
border-radius: 4px;
}
.item1 {
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
.item3 {
flex-basis: auto; /* 默认值 */
width: 150px;
}
</style>
</head>
<body>
<h1>flex-basis 示例</h1>
<div class="container">
<div class="item item1">flex-basis: 100px</div>
<div class="item item2">flex-basis: 200px</div>
<div class="item item3">flex-basis: auto + width: 150px</div>
</div>
</body>
</html>9.4 flex：flex-grow + flex-shrink + flex-basis 简写
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，可以同时设置这三个属性的值。
语法
css
.item {
flex: <flex-grow> <flex-shrink> <flex-basis>;
}常用简写
flex: 1：等价于flex: 1 1 auto，项目会均匀分配剩余空间flex: none：等价于flex: 0 0 auto，项目保持固定尺寸，不放大也不缩小flex: 0 0 <length>：项目保持固定尺寸
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>flex 简写示例</title>
<style>
.container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.item {
color: white;
padding: 20px;
margin: 5px;
border-radius: 4px;
}
.item1 {
flex: 1; /* 等价于 flex: 1 1 auto */
background-color: #3498db;
}
.item2 {
flex: none; /* 等价于 flex: 0 0 auto */
background-color: #e74c3c;
}
.item3 {
flex: 0 0 100px; /* 固定尺寸 */
background-color: #2ecc71;
}
</style>
</head>
<body>
<h1>flex 简写示例</h1>
<div class="container">
<div class="item item1">flex: 1</div>
<div class="item item2">flex: none</div>
<div class="item item3">flex: 0 0 100px</div>
</div>
</body>
</html>9.5 新手易错点：flex属性与width/height的冲突解决
常见问题
- 设置了
flex-basis后，width/height不生效 - 项目尺寸不符合预期
解决方案
- 理解优先级：
flex-basis优先级高于width/height - 合理使用：
- 需要固定尺寸时：使用
flex: 0 0 <length> - 需要自适应时：使用
flex: 1或flex-grow: 1 - 需要保持原始尺寸时：使用
flex: none或flex-basis: auto
- 需要固定尺寸时：使用
- 调试技巧：使用浏览器开发者工具查看计算样式，了解最终应用的尺寸
实操练习
- 创建一个使用
flex-grow分配剩余空间的布局 - 创建一个使用
flex-shrink控制缩小比例的布局 - 创建一个使用
flex-basis设置初始尺寸的布局 - 使用
flex简写属性实现不同的尺寸控制效果
通过本节的学习，你已经掌握了如何控制Flex项目的尺寸。这些属性是实现灵活布局的关键，合理使用它们可以创建出适应不同屏幕尺寸的响应式布局。