flex布局
flex布局通过为父元素增加flex属性,来控制子盒子的位置和排列方式。当为父盒子设置flex布局后,子元素的float、clear和vertival-align将不再起作用
父元素(容器)属性:
flex-direction
:设置主轴方向flex-wrap
:设置子元素是否换行flex-flow
:复合属性,相当于flex-direction
+flex-wrap
justify-content
:设置主轴上的子元素排列方式align-items
:设置交叉轴上的子元素排列方式(单行)align-content
:设置交叉轴上的子元素排列方式(多行),单行下无效果
-
flex-direction
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
-
flex-wrap
nowrap
(默认值)不换行(为了不换行目的会缩小项目大小)wrap
换行,第一行在上方wrap-reverse
换行,第一行在下方
-
flex-flow
- 属性=
felx-direction
+flex-wrap
- 默认值为
row nowrap
- 属性=
-
justify-content(主轴上的子元素排序方式)
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。项目之间的间隔(两个项目两侧的距离相加)比项目与边框的间隔大一倍。
-
align-items(侧轴上的子元素排序方式)
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):拉伸,如果项目未设置高度或设为auto,将占满整个容器的高度。
-
align-content
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
子元素(项目)属性:
-
order
定义项目的排序,数值越小,排序越靠前,可为负值,默认值为0 -
flex
,顺序对应flex-grow flex-shrink flex-basis 组合,默认值为0,1,auto;该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto);flex=1,等价于1,1,0% -
align-self
,属性允许单个项目在侧轴有与其他项目不一样的对齐方式,可覆盖align-items
属性;默认值为auto,表示集成父元素的align-item属性 -
flex-grow
定义项目的放大比例,默认为0 -
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,负值无效 -
flex-basis
定义了在分配多余空间之前,项目占据的主轴空间(main size),默认值为auto,即元素本身的大小