彈性盒模型（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：用於指定彈性子元素之間怎麼分配空間。