Flex

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

flex属性是flex-growflex-shrinkflex-basis属性的简写属性。

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

属性包括flex-basisflex-directionflex-flowflex-shrinkflex-growflex-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-directionflex-wrap复合属性。

flex-grow

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

1
可选:比例(当小于1时缩小)|initial|inherit

flex-shrink

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

1
可选:比例(当大于1时扩小)|initial|inherit

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