flex布局

一.布局原理:

通过给父盒子添加flex属性,来控制盒子的位置和排列方式

注意:

1.当我们为父盒子设置flex布局后,子元素的float,clear和vertical-align属性都将失效
2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

二.常见属性:

1.flex-direction:

设置主轴方向(默认主轴,在x轴上从左到右;默认侧轴,在y轴上从上到下)

row:默认从左到右
row-reverse:从右到左
column从上到下
column-reverse从下到上

2.flex-wrap:

nowrap:默认值,不换行
wrap:换行

3.justify-content:

设置主轴上的子元素排列方式

4.align-content:

设置侧轴上的子元素排列方式(多行)

 5.align-items:

设置侧轴上子元素的排列方式(单行)

 6.flex-flow:

复合属性,相当于同时设置了flex-direction和flex-wrap

flex-flow:row wrap;

三.align-self

可以在子元素自身设置的flex属性,他所拥有的属性值同4.align-content