flex布局属性

19、flex布局属性

a.确定主轴 flex direction

1、row 默认从左到右为主轴

2、column 从上到下为主轴

3、row-reverse 从右到左为主轴

4、column-reverse从下到上为主轴

b.换行

1、flex-wrap 默认是换行

2、no-wrap不换行

c、主轴排列属性justify-content

1、flex-start 从起点位置依次排列

2、center 居中排列

3、flex-end 从终点位置开始依次排列

4、space-around 弹性盒子到弹性容器的距离是盒子到盒子距离的一半

5、space-between 盒子紧贴容器(盒子与容器之间距离为零) 盒子之间的距离相等

6、space-evenly 盒子与容器 、盒子与盒子之间的距离相等

d.侧轴排列属性align-items（单行）

1、stretch 默认效果 弹性盒子沿着侧轴线被拉伸至铺满容器

2、center 垂直居中

3、flex-start 从侧轴起点开始依次排列

4、flex-end 从侧轴终点开始依次排列

e.侧轴排列属性align-content（多行）

方式同主轴一样

f.子盒子自身排列方式align-self

方式同侧轴一样（这个属性只能用于弹性盒子自身）