1.主轴起点 -> main start 主轴终点 -> main end 主轴的长度 -> main size
交叉轴起点-> cross start 交叉轴终点-> cross end 交叉轴的长度-> cross size
2.一般来说,主轴的长度是从左到右的,交叉轴的长度是从上到下的,但是我们可以通过flex-direction控制它们的方向
flex-direction方向的属性
row 从左到右的水平方向为主轴
row-reverse 从右到左的水平方向为主轴
column 从上到下的垂直方向为交叉轴
column-reverse 从下到上的垂直方向为交叉轴
3.对齐方式
justify-content属性,通过定义子元素在主轴上的对齐方式来指明对齐方式
align-items属性,通过定义子元素在交叉轴上的对齐方式来指明对齐方式
justify-content 属性
flex-start 默认值,按照主轴起点对齐
flex-end 按照主轴结束点对齐
center 在主轴居中对齐
space-between 两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔相等。
space-around 每个子元素之间的距离相等,两端的子元素距离容器的距离也和其他子元素之间的距离相等
align-items属性类似