flex 属性有哪些
时间: 2025-06-29 07:25:28 浏览: 4
### CSS `flex` 属性详解
#### 简写属性定义
`flex` 是用于设置或检索弹性盒模型对象子元素如何分配空间的属性。此属性是 `flex-grow`, `flex-shrink` 和 `flex-basis` 的简写形式[^2]。
#### 单值语法
当仅提供单个参数时,该值被赋予给 `flex-grow` 或者如果带有单位则赋给 `flex-basis`。例如:
```css
.item {
flex: 1;
}
```
这表示项目将增长以填充容器中的任何剩余空间。
#### 双值语法
可以同时设定 `flex-grow` 和 `flex-basis`:
```css
.item {
/* grow factor and basis */
flex: 2 100px;
}
```
这里第一个数值代表伸缩因子(`flex-grow`)而第二个则是基础尺寸(`flex-basis`)。
#### 完整三值语法
完整的声明允许指定全部三项——生长比例、收缩比例以及初始大小:
```css
.item {
/* grow, shrink, and basis */
flex: 1 1 auto;
}
```
上述代码意味着该项目会按照其内容自动调整宽度/高度,并参与额外空间的增长与压缩过程。
#### 默认行为
默认情况下,如果没有特别指明,则相当于设置了 `flex: 0 1 auto`;这意味着项目不会扩展来占用多余的空间 (`flex-grow: 0`) ,但是可以在必要时缩小 (`flex-shrink: 1`) 并基于自身的内容决定起始尺寸 (`flex-basis: auto`)[^4]。
#### 实际应用案例
考虑一个简单的例子,在这个场景中有三个相同类别的 div 元素作为父级容器 `.container` 下面的孩子节点:
```html
<div class="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
```
通过下面这段样式表可以让这些孩子均匀分布并占据整个可用区域:
```css
.container {
display: flex;
}
.item {
flex: 1; /* Each item will equally share the available space */
}
```
这样做的效果就是每个`.item`都会平分父容器内的所有空白部分。
阅读全文
相关推荐














