3.1常见父项属性
以下由6个属性是对父元素设置的
flex-direction :设置主轴的方向上
justify-content :设置主轴上的子元素排列方式
flex-wrap :设置子元素是否换行
align-content :设置侧轴上的子元素的排列方式(多行)
align-items :设置侧轴上的子元素排列方式(单行)
flex-flow :复合属性.相当于同时设置了flex-direction 和flex wrap
3.2 flex-direction设置主轴的方向
1.主轴与侧轴
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴
默认主轴方向就是x轴方向,水平向右
默认侧轴方向就是y轴方向,水平向下
2.属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
注意:主轴和侧轴是会变化的,就看flex- direction设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
3.3 justify-content设置主轴.上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
3.4 flex-wrap设置子元素是否换行
默认情况下,项目都排在一条线(又称”轴线”) 上。flex-wrap属性定义 , flex布局中默认是不换行的。
3.5 align-items设置侧轴.上的子元素排列方式(单行)
该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项的时候使用