弹性盒模型（flex-box）

弹性盒模型（display：flex）

在我们做移动端项目的时候，弹性盒模型经常会用到，初学者经常会搞不清它的属性。下面主要了解一下弹性盒子的五个属性。

1. flex-direction：指定弹性子元素在父容器中的位置

• row：左对齐
• row-reverse：右对齐
• column：纵向对齐，即从上向下排列
• column-reverse：反转纵向对齐，即从下向上排列

下面展示效果
flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

2. justify-content：内容对齐

• flex-start：左对齐
• flex-end：右对齐
• center：居中
• space-between：平均分布
• space-around：平均分布并且两边有一半的间隔空间

下面展示效果
justify-content：flex-start

justify-content：flex-end

justify-content：center

justify-content：space-between

justify-content：space-around

3. align-items：纵轴上的对齐方式

• flex-start：左对齐
• flex-end：右对齐
• center：居中
• baseline：基线对齐
• stretch：auto默认

下面展示效果
align-items：flex-start

align-items：flex-end

align-items：center

align-items：baseline

align-items：stretch

4.flex-wrap：子元素换行方式

• nowrap：默认单行
• wrap：多行
• wrap-reverse：翻转多行
• initial
• inherit：继承

下面展示效果
flex-wrap：nowrap

flex-wrap：wrap

flex-wrap：wrap-reverse

5.align-content：用于修改flex-wrap属性，修改各行对齐方式

• flex-start
• flex-end
• center
• space-bewteen
• space-around
• stretch：默认

下面展示效果
align-content：flex-start

align-content：flex-end

align-content：center

align-content：space-bewteen

align-content：space-around

上面五个属性是给弹性盒子设置的属性，那么弹性子元素的属性呢？

1. order 属性值为整数，数字越小，越靠前。
2. align-self：纵轴
3. flex：用于指定弹性子元素之间怎么分配空间。