CSS中的彈性布局該怎么使用呢？下面合肥網站建設小編就來為大家詳細的講解一下！希望對大家能有所幫助！

Flex(彈性布局)，是一種響應式布局，能自動伸縮盒模型達到自適應的效果。

彈性布局由彈性容器(flex container)和彈性項目(flex item)組成。

在彈性容器中，水平方向稱為主軸(main axis)(起點main start,終點main end)；垂直方向稱為縱軸(cross axis)(起點cross start,終點cross end)。

在彈性項目中，元素的寬度稱為main size，高度稱為cross size。

彈性容器

通過display: flex屬性，可將元素聲明塊級彈性容器；通過dsplay: inline-fex，可將元素聲明為行內彈性容器。

flex-direction屬性

flex-direction指定主軸(main cross)的方向，即元素排列的方向。

flex-wrap屬性

flex-wrap屬性，指定彈性項目的換行方式，即彈性項目超過一行時如何換行。

flex-wrap: no-wrap | wrap | wrap-reverse

// 屬性解釋：no-wrap: 不換行(默認)wrap: 正常換行wrap-reverse: 換行，第一行在下方，從下往上換行

flex-flow屬性

flex-flow屬性，為flex-direction和flex-wrap的合并屬性。

// 第一個為flex-direction,第二個為flex-wrapflex-fow: <flex-direction> <flex-wrap>

justify-content屬性

justify-content屬性，指定彈性內容在主軸上的排列方式。

justify-content: flex-start | flex-center | flex-end | space-between | space-around

align-items屬性

align-items屬性，指定彈性項目在縱軸上的對齊方向。

align-items: flex-start | center | flex-end | base-line | stretch// 屬性解釋：

flex-start: 項目對齊縱軸的起點(cross start)

center: 居中

flex-end: 項目對齊縱軸的終點(cross end)

baseline: 基于基線對齊

stretch: 拉伸(默認)，從起點(cross start)到終點(croos end)

align-content屬性

align-content屬性，指定當主軸(main axis)隨項目換行時，多條主軸線如何對齊。

align-content: flex-start | center | flex-end | space-between | space-around | stretch

為什么沒有justify-items屬性呢？

盡管flex看起來像二維布局，但其實是個一維布局，縱軸(cross axis)沒有換行(wrap)的行為，自然就沒有justify-items屬性。