CSS3彈性盒子

• 概念：（flexible box或者flexbox）是一種當頁面需要適應不同的平面大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。引入彈性盒子的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列，對其和分配空白空間。

• 內容：

  • 由彈性容器（flex container）和彈性子元素（flex item）組成

  • 彈性容器通過設定display為flex或者inline-flex將其定義為彈性容器

  • 彈性容器內包含一個或者多個子元素

  • 注

    • 彈性盒子只定義彈性子元素在彈性容器內佈局

    • 預設每個彈性容器只有一行

    • 子元素在一行內顯示，從左到右

• 彈性容器（flex container）屬性

  • direction 佈局方式

  • felx-direction指定彈性子元素在父容器中的位置

    • row 橫向從左到右排列(左對齊)，預設排序方式

    • row-reverse 反轉很想排序（右對齊，從後往前排，最後一項排在最前面。

    • column 縱向排列

    • column-reverse 反轉縱向排列，從後往前排，最後一項排在最上面

  • justify-content 屬性應用在彈性容器上，吧彈性項沿著彈性容器的主軸線對齊

    • flex-start 彈性專案向行頭緊挨著填充

    • flex-end 彈性專案向行尾緊挨著填充

    • center 彈性專案居中緊挨著填充（如果生於空間是負的，彈性專案將在兩個方向上同時溢位）

    • space-between 彈性專案平均分佈在該行上。如果剩餘空間為負或者只有一個彈性項，則該值等同於flex-start。

    • space-around 彈性專案平均分別在該行上，兩邊留有一般的空間間隔。

      • 列如：專案之間間隔20px，那麼首尾和彈性盒子之間留有10px的間隔

      • 如果剩餘空間為負或者只有一個彈性項，則該值等同於center

  • align-items 設定或者檢索彈性盒子元素在縱軸的對其方式

    • flex-start 彈性盒子元素的縱軸起始邊界僅靠在該行縱軸的起始邊界

    • flex-end 彈性盒子元素的縱軸起始邊界僅靠在該行縱軸的結束邊界

    • center 在縱軸方向居中

    • baseline 參與基線對齊

    • stretch 如果縱軸大小屬性值為auto，則會使該專案邊距盒尺寸儘可能接近行的尺寸。但同時或遵守min/max屬性的限制

  • flex-wrap 用於指定彈性盒子的子元素的換行方式

    • nowrap 預設-  彈性盒子為單行。該情況下彈性盒子項可能會溢位容器。

    • wrap 彈性盒子為多行。這種情況下彈性盒子項移除的部分會被放置到新行，子項內部會發生斷航。

    • wrap-reverse -反轉wrap排列。

  • align-content  用於修改flex-wrap屬性的行為，類似於align-items，但它不設定盒子元素的對其，而是設定各個行的對齊（使用前提是高度不是auto才能看出效果）

    • stretch 預設。各行將會伸展以佔用剩餘的空間

    • flex-start 各行向彈性容器的其實位置堆疊

    • flex-end 各行向彈性容器結束位置堆疊

    • center 各行向彈性容器中間位置堆疊

    • space-between 各行在彈性容器中平均分佈

    • space-around 各行在彈性容器中平均分別，兩端保留子元素與子元素之間間距大小的一半

• 彈性子元素（flex item）屬性（一般用在flex-wrap：nowrap的情況下）

  • order 排序

    • integer 用整數值來定義排列順序，數字小的排在前面。可以為負數。預設0，排序會在flex-drection之前執行。

    • magrin 對齊，當值為auto時自動獲取彈性容器中剩餘的空間（在四個不同方位上設定auto，代表將剩餘空間放在指定子元素的方位）不加方位，完美居中。

  • align-self 用於設定子元素自身在縱軸方向的對齊方式

    • auto 如果align-self值為auto，則其計算值為元素的父元素的align-items值，如果沒有父元素，計算值為stretch。

    • flex-start 起始位置的邊界緊靠改行縱軸起始邊界。

    • flex-end 其實位置的邊界緊靠改行縱軸結束邊界

    • center 改行的縱軸居中

    • baseline 行內軸和縱軸為同一條時與flex-start等效。其他情況下，該值將參與基線對齊。

    • stretch  如果縱軸屬性值大小為auto，則其值會使專案邊距盒的尺寸盡肯能接近所在行的尺寸。但同時遵守min/max屬性的限制。

  • flex用於指定子元素如何分配空間

    • auto 計算值為 1 1

    • initial 計算值為0 1

    • none 計算值為 0 0

    • inherit：從父元素繼承

    • [flex-grow] 定義元素的擴充套件比率

    • [flex-shrink] 定義元素的收縮比率

    • [flex-basis] 定義元素的預設基準值