CSS3 box-flex 彈性盒子佈局
阿新 • • 發佈：2018-12-15
本文將從css3 box-flex的屬性來講解彈性佈局
CSS3 彈性盒子屬性
下表列出了在彈性盒子中常用到的屬性:
| 屬性 | 描述 |
|---|---|
| 指定 HTML 元素盒子型別。 | |
| 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。 | |
| 設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。 | |
| 設定彈性盒子的子元素超出父容器時是否換行。 | |
| 修改 flex-wrap 屬性的行為，類似align-items, 但不是設定子元素對齊，而是設定行對齊 | |
| flex-direction 和 flex-wrap 的簡寫 | |
| order | 設定彈性盒子的子元素排列順序。 |
| 在彈性子元素上使用。覆蓋容器的 align-items 屬性。 | |
| flex | 設定彈性盒子的子元素如何分配空間。 |
浮動佈局誕生時只是為了圖文快排，並不是為了塊狀佈局，flex-box是專門為塊級佈局而誕生的
display:flex和flex-direction
display:flex;指定當前盒子為彈性盒子
flex-direction：改變主軸的方向//寫在當前盒子中而不是子盒子中
row: X軸 從左向右
row-reverse: X軸 從右向左
column: Y軸 從上向下
column-reverse: Y軸 從下向上
| 值 | 描述 | 例項 |
|---|---|---|
| row | 預設值。靈活的專案將水平顯示，正如一個行一樣。 | 嘗試一下 » |
| row-reverse | 與 row 相同，但是以相反的順序。 | 嘗試一下 » |
| column | 靈活的專案將垂直顯示，正如一個列一樣。 | 嘗試一下 » |
| column-reverse | 與 column 相同，但是以相反的順序。 | 嘗試一下 » |
| initial | 設定該屬性為它的預設值。請參閱 initial。 | 嘗試一下 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
flex-wrap 伸縮容器
這裡所謂的拆行換行，指的是div的總長度，與子div內部無直接關係
屬性值
| 值 | 描述 |
|---|---|
| nowrap | 預設值。規定靈活的專案不拆行或不拆列。 |
| wrap | 規定靈活的專案在必要的時候拆行或拆列。 |
| wrap-reverse | 規定靈活的專案在必要的時候拆行或拆列，但是以相反的順序。 |
| initial | 設定該屬性為它的預設值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
flex-flow ：flex-direction和flex-wrap的縮寫方式
flex-flow：flex-direction||flex-wrap
order：（針對子盒子）設定彈性盒物件元素的順序
.a1 {order:2;} .a2 {order:1;} .a3 {order:3;}
justify-content、aign-items和align-self
justify-content（針對父盒子）
伸縮容器---在X軸對齊方式
| 值 | 描述 | 測試 |
|---|---|---|
| flex-start | 預設值。專案位於容器的開頭。左對齊 | 測試 » |
| flex-end | 專案位於容器的結尾。右對齊 | 測試 » |
| center | 專案位於容器的中心。居中 | 測試 » |
| space-between | 專案位於各行之間留有空白的容器內。 X軸上均勻分佈 只限於子盒子之間 | 測試 » |
| space-around | 專案位於各行之前、之間、之後都留有空白的容器內。 Y軸上均勻分佈 包括子盒子之間和父盒子兩邊 | 測試 » |
| initial | 設定該屬性為它的預設值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
aign-items （針對父盒子）
伸縮容器 控制伸縮項在Y軸對齊方式
| 值 | 描述 | 測試 |
|---|---|---|
| stretch | 預設。 拉伸元件以適應容器。 | 測試 » |
| center | 中心元素在容器內。 | 測試 » |
| flex-start | 位置元素在容器的開頭。 | 測試 » |
| flex-end | 位置元素在容器的末端。 | 測試 » |
| baseline | 位置元素在容器的基線。 | 測試 » |
| initial | 設定為預設值。請參閱 initial。 | 測試 » |
| inherit | 從其父元素繼承此屬性。請參閱 inherit。 |
align-self 伸縮項（針對子盒子）
控制指定伸縮項在Y軸的展現方式 只有設定了父盒子的Y軸對齊方式 align-items之後才會生效
| auto | 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 | 測試 » |
| stretch | 元素被拉伸以適應容器。當其子盒子沒有設定固定高度才有效 | 測試 » |
| center | 元素位於容器的中心。 | 測試 » |
| flex-start | 元素位於容器的開頭。 | 測試 » |
| flex-end | 元素位於容器的結尾。 | 測試 » |
| baseline | 元素位於容器的基線上。 | 測試 » |
| initial | 設定該屬性為它的預設值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
align-content：控制伸縮項所組成的行列（伸縮行列）在Y軸的展現方式，只有一行或列不生效
| 值 | 描述 | 測試 |
|---|---|---|
| stretch | 預設值。專案被拉伸以適應容器。 | 測試 » |
| center | 專案位於容器的中心。 | 測試 » |
| flex-start | 專案位於容器的開頭。 | 測試 » |
| flex-end | 專案位於容器的結尾。 | 測試 » |
| space-between | 專案位於各行之間留有空白的容器內。 | 測試 » |
| space-around | 專案位於各行之前、之間、之後都留有空白的容器內。 | 測試 » |
| initial | 設定該屬性為它的預設值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
flex-grow 、flex-shrink、basis
flex-grow
控制伸縮項在伸縮行的伸展程度
屬性值
| 值 | 描述 |
|---|---|
| number | 一個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。預設值是 0。 |
| initial | 設定該屬性為它的預設值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
flex-shrink （針對子盒子）
屬性：用於設定或檢索彈性盒的收縮比率。針對Y軸方向，沒有設定高的情況下有效。
注意：如果元素不是彈性盒物件的元素，則 flex-shrink 屬性不起作用。
屬性值
| 值 | 描述 |
|---|---|
| number | 一個數字，規定專案將相對於其他靈活的專案進行收縮的量。預設值是 0。flex-shrink: 3;表示佔據1/3 |
| initial | 設定該屬性為它的預設值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
flex-basis
屬性值
| 值 | 描述 |
|---|---|
| number | 一個長度單位或者一個百分比，規定靈活專案的初始長度。 |
| auto | 預設值。長度等於靈活專案的長度。如果該專案未指定長度，則長度將根據內容決定。 |
| initial | 設定該屬性為它的預設值。請參閱 initial。 |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
