【无标题】flex布局父项常见属性

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轴).上的排列方式在子项为单项的时候使用