flex布局具有主轴和交叉轴两个概念，这两个轴的位置并不是不会改变的。
flex-dirction 属性决定主轴方向
row(默认值) 主轴水平方向,起点在左端
row-reverse主轴为水平方向,起点在右端
column主轴为垂直方向,起点在顶部
column-reverse主轴为垂直方向，起点在底部
主轴和交叉轴概念可能有点混乱，我们可以结合X，Y轴进行理解。也就是说当flex-direction值为row时，X轴就是主轴，Y轴就是交叉轴；当flex-direction的值为column时，Y轴就是主轴，X轴就是交叉轴。
属性分析
justify-content 定义在主轴上的对齐方式
flex-start：起始端对齐
flex-end：末尾端对齐
center：居中对齐
space-between：两端对齐
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items 定义在交叉轴上的对齐方式
flex-start：起始端对齐
flex-end：末尾端对齐
center：居中对齐
baseline：基线对齐（默认指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切确定基线）
stretch：子容器沿交叉轴方向的尺寸拉伸至父容器一致
align-self 属性允许单个子容器与其它项目有不一样的对齐方式，可以覆盖align-items属性
auto：默认值，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
flex-start：起始端对齐
flex-end：末尾端对齐
center：居中对齐
baseline：基线对齐
stretch：拉伸对齐
flex-wrap 属性定义了当一条轴线排不下所有子容器时如何换行
nowrap：默认值，不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
align-content 定义多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的重点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线的两侧间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch：默认值 轴线占满整个交叉轴
网友评论