以下由6个属性是对父元素设置的
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式 (多行)
align-items:设置侧轴上的子元素的排列方式 (单行)
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
align-content 和 align-items
align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸
align-content 使用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找 align-itens 多行找 align-content
主轴与侧轴
在flex布局在,是分为主轴和侧轴两个方向,同样的叫法有:行和列,x轴和y轴
默认主轴方向就是x轴得方向,水平向右
默认侧轴方向就是y轴得方向,垂直向下
flex-direction 属性决定主轴的方向(即项目的排列方向
注意:主轴和侧轴是会变化的,就看 flex-direction 设置为主轴,剩下的就是侧轴,而我们的子元素是跟着主轴来排列的
属性值 | 解释说明 |
---|---|
row | 默认值从左到右 |
row-reverse | 从右向左 |
column | 从上到下 |
column-reverse | 从下到上 |