flex

flex 是一个简写属性，它具有规定一个可伸缩项目的能力。flex 元素可以根据 flex-grow 因子拉伸以填充可用空间，或根据 flex-shrink 因子收缩以防止溢出。

语法

flex:none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

值

值	描述
none	此关键字等于0 0 auto。
<flex-grow>	规定 flex item 的 flex-grow 属性。
<flex-shrink>	规定 flex item 的 flex-shrink 属性。
<flex-basis>	规定 flex item 的 flex-basis 属性。任何可用于width和height的值都可接受。若值为0，则必须加上单位，以免被视作伸缩性。默认值为0%。

例子

HTML

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;  //横向从左到右排列（左对齐）,子元素溢出父容器时自动换行。
  justify-content: space-around;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 100px;
  margin-top: 10px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

执行结果

1
2
3
4
5
6


跳至内容顶部