主轴和侧轴
Flex
布局的伸缩容器可以使用任何方向进行布局。
容器默认有两个轴:主轴(main axis)和侧轴(cross axis)。
主轴的开始位置为主轴起点
(main start),主轴的结束位置为主轴终点
(main end),而主轴的长度为主轴长度
(main size)。
同理侧轴的起点为侧轴起点
(cross start),结束位置为侧轴终点
(cross end),长度为侧轴长度
(cross size)。详情见下图:
Flex-direction
注意,主轴
并不是一定是从左到右
的,同理侧轴
也不一定是从上到下
,主轴的方向使用flex-direction
属性控制,它有4个可选值:
row
:从左到右的水平方向为主轴row-reverse
:从右到左的水平方向为主轴column
:从上到下的垂直方向为主轴column-reverse
从下到上的垂直方向为主轴
如果水平方向为主轴,那个垂直方向就是侧轴,反之亦然。
justify-content
有5个可选的对齐方式:
flex-start
主轴起点对齐(默认值)flex-end
主轴结束点对齐center
在主轴中居中对齐space-between
两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等space-around
每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同。
align-items
表示侧轴上的对齐方式:
stretch
填充整个容器(默认值)flex-start
侧轴的起点对齐flex-end
侧轴的终点对齐center
在侧轴中居中对齐baseline
以子元素的第一行文字对齐