justify-content是水平布局，与之对应的是垂直布局align-item。下面我们一起了解下水平布局和垂直布局的参数justify-content水平布局1/6分步阅读

1.默认值flex-start

justify-content : flex-start;

2/6

2.flex-end ：水平方向的终点对齐

justify-content : flex-end;

3/6

3.center : 居中

justify-content : center;

4/6

4.space-between：最左最右靠边，中间间距相等

justify-content : space-between;

5/6

5.space-evenly : 每个间距，均匀分布为x

justify-content :space-evenly;

6/6

6.space-around ： 每个项目的左右撑开距离相等。

justify-content :space-around;

algin-item垂直分布1/5

1.stretch : 默认值，垂直方向铺满；

algin-item ：stretch；

2/5

2.flex-start ：起始位置均在上部；

algin-item : flex-start;

3/5

3. center : 居中

algin-item : center;

4/5

4. flex-end : 底部保持触底。

algin-item ： flex-end；

5/5

5.baseline ：按第一项目的文字为基准线；

algin-item ： baseline；

总结1/1

1.justify-content：水平分布参数：

（1）flex-start

(2)center

(3)flex-end

(4)space-between

(5)space-around

(6)space-evenly

2.algin-item：垂直分布参数：

(1)stretch

(2)flex-start

(3)center

(4)flex-end

(5)baseline

JUSTIFYCONTENTALGIN-ITEM水平分布垂直分布