Flex 布局,也称为弹性布局,是为了适应不同的屏幕尺寸和不同的设备类型二提出的一种布局方式。
基本概念
上图是一个横向的,文本流从左到右的弹性布局图示。这里有几个概念
- 弹性容器(Flex container), 指一个声明为 flex 或者 inline-flex 的元素,是所有 Flex items 的父元素。
- 弹性项目(Flex item), 指 flex 容器内的直接孩子元素;弹性容器中的直接文本项默认为匿名弹性项目。
- 主轴(main axis)和侧轴(cross axis), 类似于二维中的 X 轴和 Y 轴,主轴由属性 flex-direction 来定义,与主轴垂直的轴则是侧轴。
定义弹性布局
要使用弹性布局,需要定义一个弹性容器(Flex container),通过声明 display 属性为 flex 或者 inline-flex 来将此元素定义为弹性容器。
.flex { display: flex }
弹性容器的属性
flex-direction
定义排列的方向row
默认值,主轴为水平,从左向右排列row-reverse
主轴为水平,从右向左排列column
主轴为垂直方向,从上向下排列column-reverse
主轴为垂直方向,从下向上排列
flex-wrap
定义是否新行显示,以及新行的排列方向nowrap
默认值,显示在同一行,不换行wrap
一行显示不了时使用新行显示wrap-reverse
同wrap
,但是从下向上显示
flex-flow
是flex-direction
和flex-wrap
的简写方式- 使用方法
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
- 默认值为:
row nowrap
- 使用方法
justify-content
定义弹性项目在主轴上的对齐方式flex-start
默认值,从起始位置对齐,通常为左对齐flex-end
从结束位置对齐,通常为右对齐center
居中对齐space-between
两端对齐,平均间隔space-around
每个子元素都有相等的外边距,相邻元素外边距不会叠加
align-items
定义弹性项目在侧轴上的对齐方式stretch
默认值,弹性项目在没指定高度或者高度为auto
的情况下,则高度会占满空间flex-start
侧轴起点开始对齐flex-end
从侧轴结束位置对齐center
相对侧轴居中对齐baseline
与基线对齐
align-content
定义多行在侧轴的对齐方式,当只有一行时,不起作用stretch
默认值,各行会伸展以占满整个纵轴空间flex-start
对齐到纵轴起点flex-end
对齐到纵轴终点center
相对纵轴中间对齐space-between
各行相对纵轴两端对齐,各行间隔相等space-around
各行都有相等的外边距,各行的外边距不会叠加
弹性项目的属性
flex-grow
数字,定义弹性项目的放大比例,默认 0flex-shrink
数字,定义弹性项目的缩小比例,默认 1,值 0 表示不缩小flex-basis
数字,定义弹性项目的默认尺寸,flex
是flex-grow
flex-shrink
flex-basis
的缩写,默认值为0 1 auto
align-self
定义此弹性项目本身的对齐方式,会覆盖弹性容器align-items
定义的对齐方式auto
从弹性容器继承stretch
弹性项目在没指定高度或者高度为auto
的情况下,则高度会占满空间flex-start
侧轴起点开始对齐flex-end
从侧轴结束位置对齐center
相对侧轴居中对齐baseline
与基线对齐
order
数字,定义弹性项目的显示顺序,数字越小越靠前
参考