将 flex-basis
属性应用于 Flex 项目
在这一步中,你将学习 flex-basis
属性以及它如何控制 flex 项目的初始大小。打开 WebIDE 中的 flexbox-demo.html
文件,并更新 CSS 样式以演示 flex-basis
。
添加以下 CSS 以将 flex-basis
应用于单个 flex 项目:
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
.item1 {
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
.item3 {
flex-basis: 150px;
}
.item4 {
flex-basis: 250px;
}
.item5 {
flex-basis: 120px;
}
</style>
关于 flex-basis
的关键点:
- 它设置了 flex 项目的初始主轴大小
- 可以以像素、百分比或其他单位指定
- 决定了在 flex 增长或收缩之前的默认大小
- 在 flex 容器中替代了
width
保存文件时的示例输出:
已添加具有不同 flex-basis 值的 flex 项目
当你在浏览器中打开 HTML 文件时,你会看到 flex 项目根据其 flex-basis
值具有不同的初始宽度。