Flex

flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

属性包括flex-basis、flex-direction、flex-flow、flex-shrink、flex-grow、flex-wrap。

flex-basis

flex-basis属性用于设置或检索弹性盒伸缩基准值，默认值auto。

1
2
3
4
5
6
7
8
可选：number|auto|initial|inherit;
其中，number表示长度单位或百分比，auto表示根据内容决定当前盒子长度。

//实例：指定class="test"元素下，第二个div元素的宽度
.test div:nth-of-type(2) {
    -webkit-flex-basis: 80px; /* Safari 6.1+ */
    flex-basis: 80px;
}

nth-of-type()选择器？

nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//实例1：按奇偶顺序改变子元素颜色
p:nth-of-type(odd)
{
  background:#ff0000;
}
p:nth-of-type(even)
{
  background:#0000ff;
}
//实例2：按3n+1的顺序添加背景颜色
p:nth-of-type(3n+0)
{
  background:#ff0000;
}

flex-direction

flex-direction属性用于指定子元素的排列方向。

1
可选：row|row-reverse|column|column-reverse|initial|inherit

flex-wrap

flex-wrap属性用于指定flex容器内子元素的排列方式：单行或多行。

1
可选：nowarp单行|warp多行|warp-reverse反向多行

flex-flow

flex-flow属性用于设置子元素的排列顺序，是flex-direction和flex-wrap复合属性。

flex-grow

flex-grow属性用于设置子元素扩大的比率。

1
可选：比例（当小于1时缩小）|initial|inherit

flex-shrink

flex-shrink属性用于设置子元素缩小的比率。

1
可选：比例（当大于1时扩小）|initial|inherit

flex-grow和flex-shrink其实可以实现同样的效果。