CSS flex 属性

CSS flex 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

实例

不管其内容如何，使所有弹性项目的长度均相同：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* 标准语法 */
}
</style>
</head>
<body>
<h1>translate() 方法</h1>
<p>translate() 方法从元素当前位置对其进行移动：</p>
<div>
该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。
</div>
</body>
</html>

运行一下

定义和用法

flex 是以下属性的简写属性：

flex-grow
flex-shrink
flex-basis

flex 设置的是弹性项目的弹性长度。

注释：如果元素不是弹性项目，则 flex 属性无效。

默认值：	0 1 auto
继承：	否
动画制作：	支持。请查看单独的属性。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.flex="1"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-ms- 或 -moz- 的数字表示使用前缀的首个版本。

属性
flex	29.021.0 -webkit-	11.010.0 -ms-	28.018.0 -moz-	9.06.1 -webkit-	17.0

CSS 语法

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 和媒体查询为不同的屏幕尺寸/设备创建不同的布局：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}
.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 50%;
}
.flex-item-right {
  background-color: dodgerblue;
  padding: 10px;
  flex: 50%;
}
/* 响应式布局 - 制作一列布局而不是两列布局 */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}
</style>
</head>
<body>
<h1>响应式弹性框</h1>
<p>在此例中，我们修改了 flex 的百分比，以针对不同的屏幕尺寸创建不同的布局。</p>
<p><b>请调整浏览器窗口的大小，来查看小于或等于 800 像素时的方向改变。</b></p>
<div class="flex-container">
  <div class="flex-item-left">1</div>
  <div class="flex-item-right">2</div>
</div>
</body>
</html>