码农教程 - 一技在手,衣食无忧! tools

目录

CSS flex 属性

❮上一节 完整的CSS参考 下一节❯

示例

让所有灵活项的长度相同，无论其内容如何：

#main div {
  -ms-flex: 1; /* IE 10 */
  flex: 1;
}
亲自试一试 »

提示：下面有更多 "亲自试一试" 示例。

定义和用法

这个flexproperty 是以下属性的简写：

这个flex属性设置灵活项目的灵活长度。

笔记：如果该元素不是灵活项，则flex属性没有影响。

展示演示❯

默认值： 0 1 自动
遗传： 不
可动画： 是的，查看各个属性。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.flex="1"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -webkit-、-ms- 或 -moz- 的数字指定使用前缀的第一个版本。

Property
flex 29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0

CSS 语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

Value Description Demo
flex-grow A number specifying how much the item will grow relative to the rest of the flexible items Demo ❯
flex-shrink A number specifying how much the item will shrink relative to the rest of the flexible items
flex-basis The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit Demo ❯
auto Same as 1 1 auto.
initial Same as 0 1 auto. Read about initial
none Same as 0 0 auto.
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

使用flex和...一起媒体查询为不同的屏幕尺寸/设备创建不同的布局：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}
亲自试一试 »

相关页面

CSS 教程：CSS 灵活盒

CSS 参考：弹性基础属性

CSS 参考：弯曲方向属性

CSS 参考：弹性流属性

CSS 参考：弹性增长属性

CSS 参考：伸缩收缩属性

CSS 参考：flex-wrap 属性

HTML DOM 参考：弹性属性


❮上一节 完整的CSS参考 下一节❯