CSS flex 属性
提示: 下面有更多 "Try it Yourself" 实例。
定义和用法
flex 是以下属性的简写属性：
flex 属性设置的是弹性项目的弹性长度。
注释: 如果元素不是弹性项目，则 flex 属性无效。
| 默认值: | 0 1 auto |
|---|---|
| 继承性: | no |
| 支持动画: | yes, 请参阅单独的属性. 阅读有关动画的信息 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.flex="1" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
带 -webkit-、-ms- 或 -moz- 的数字表示使用前缀的首个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| flex | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
语法
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| flex-grow | 数字，规定项目相对于其余弹性项目的增长量。 |
| flex-shrink | 数字，规定项目相对于其余弹性项目的收缩量。 |
| flex-basis |
项目的长度。 合法值："auto"、"inherit"，或单位为 "%", "px", "em" 的值，或任何其他长度单位。 |
| auto | 等同于 1 1 auto。 |
| initial | 等同于 0 1 auto。 initial |
| none | 等同于 0 0 auto。 |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
实例
结合使用 flex 和媒体查询为不同的屏幕尺寸/设备创建不同的布局：
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* 响应式布局 - 制作一列布局 (100%) 而不是两列布局 (50%) */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
亲自试一试 »
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* 响应式布局 - 制作一列布局 (100%) 而不是两列布局 (50%) */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
相关页面
CSS 教程: CSS 弹性框
CSS 参考手册: flex-basis 属性
CSS 参考手册: flex-direction 属性
CSS 参考手册: flex-flow 属性
CSS 参考手册: flex-grow 属性
CSS 参考手册: flex-shrink 属性
CSS 参考手册: flex-wrap 属性
HTML DOM 参考手册: flex 属性
