Flexbox（彈性盒模型）徹底指南

Flexbox（彈性盒模型）佈局徹底指南

Github:sueRimn

來源：A guide to Flexbox

這個指南講訴了flexbox的全部內容，重點介紹了父元素（flex容器）和子元素（flex元素）的全部不一樣可能屬性。它還包括歷史記錄、演示、模式和瀏覽器支持圖表。

背景

Flexbox佈局（彈性盒模型）模塊的目的在於提供一種更有效的方法在容器中的項之間佈局、對齊和分配空間，即便它們的大小未知或是動態的(所以使用「flex一詞)。

flex佈局背後的主要思想是讓容器可以更改其項（item）的寬度/高度(和順序)，以最佳地填充可用空間(主要是爲了適應各類顯示設備和屏幕大小)。flex容器（container）擴展項以填充可用的空閒空間，或者收縮項以防止溢出。

最重要的是，與常規佈局(基於垂直的塊和基於水平的內聯塊)相比，flexbox佈局是與方向無關的。雖然這些常規方法在頁面上運行得很好，可是它們缺少靈活性來支持大型或複雜的應用程序(特別是在改變方向、調整大小、拉伸、收縮等方面)。

注意:Flexbox佈局最適合應用程序的組件和小規模佈局，而Grid佈局則適用於更大規模的佈局。

基本術語

因爲flexbox是一個完整的模塊而不是一個單獨的屬性，因此它涉及到不少東西，包括它的整個屬性集。其中一些是要在容器上設置的(父元素，稱爲「flex container」)，而其餘的是要在子元素上設置的(稱爲「flex item」)。

若是「常規」佈局基於塊和內聯流方向，那麼flex佈局則基於「flex-flow方向」。請從規範中查看這個圖，解釋flex佈局背後的主要思想。 item將沿着主軸（main axis）(從主軸開始（main-start）到主軸結束（main-end）)或縱軸()(從縱軸開始（cross-start）到縱軸結束（cross-end）)佈置。

main axis：伸縮容器的主軸是放置伸縮項的。注意，它不必定是水平的，它取決於flex-direction屬性(參見下面)。

main-start|main-end：flex項被放置在容器中，從main-start到main-end。

main size：伸縮項（flex item）的寬度或高度，不管在主維度（main）中是哪一個，都是項的主尺寸。flex item的main``size屬性是「width」或「height」屬性，二者在主維度中都有。

cross axis：垂直於主軸（main axis）的軸稱爲橫軸。它的方向取決於主軸方向。

cross-start|cross-end：伸縮線由item填充，並從伸縮容器的cross-start側開始，一直到corss-end側，而後放入容器中。

cross size：flex item的寬度或高度，不管在corss維度中是哪一個，都是item的cross size。cross size屬性是在corss維度中的「寬度」或「高度」中的任何一個。

父元素屬性(flex container)	子元素屬性(flex item)
dispaly	order
定義了一個flex容器，內聯或塊取決於它給定的值。它爲全部直接子元素啓用flex上下文 注意：css列對flex容器沒有影響	默認狀況下，flex item按源順序排列。然而，order屬性控制它們在flex容器中出現的順序
.container{ display:flex;//或者 inline-flex }	.item{ order:<整數值>;//默認爲0 }
flex-direction	flex-grow
這將創建主軸，從而定義放置在flex容器中的方向flex item。 flexbox(除了可選的包裝)是一個單向佈局概念。能夠將flex item主要放在水平行或垂直列中	這定義了flex item在必要時增加的能力。 它接受一個做爲比例的無單位值。它指定item在flex容器中應該佔用多少可用空間。 若是全部項目都將flex- growth設置爲1，容器中剩餘的空間將平均分配給全部子元素。若是其中一個子元素的值爲2，那麼剩餘的空間將會佔用兩倍於其餘元素的空間(或者至少它會嘗試這樣作) 注意：負數無效
.container{  flex-direction:row / row-reverse / column / column-reverse; } row(默認):ltr是從左到右；rtl是從右到左; row-reverse：ltr是從右到左，rtl是從左到右 column:從上到下 column-reverse：從下到上	.item{ flex-grow: <數值>; //默認爲0 }
flex-wrap	flex-shrink
	返回頂部
默認狀況下，flex item都會試着放在一行上。您能夠更改此屬性，並容許根據須要使用此屬性對項進行包裝	這定義了flex item在必要時的伸縮能力
.container{ flex-wrap: nowrap / wrap / wrap-reverse; } nowrap（默認）：全部flex item將在一條線上 wrap：flex item將會從上到下分爲多行 wrap-reverse：flex item將會從下到上分爲多行	.item{ flex-shrink:<數值>; } 負數無效
flex-flow(用於父felx容器元素	flex-basis
這是一個簡化的flex-direction和flex-wrap屬性，它們一塊兒定義flex容器的主軸和交叉軸。默認值是row nowrap。	這定義了在分配剩餘空間以前元素的默認大小。它能夠是一個長度(例如20%，5rem，等等)或者一個關鍵字。 auto關鍵字的意思是「查看個人寬度或高度屬性」(這是由main-size關鍵字臨時完成的，直到被棄用)。 content關鍵字的意思是「根據項目的內容調整大小」——這個關鍵字尚未獲得很好的支持，所以很難進行測試，並且更難知道它的兄弟max-content、min-content和fit-content作了什麼。
felx-flow: <'felx-direction'> <'flex-wrap'>	.item{ flex-basis: <長度> / auto; //默認是auto } 若是設置爲0，則不考慮內容周圍的額外空間 若是設置爲auto，則根據其flex-growth值分配額外的空間
justify-content	flex
這定義了沿着主軸的對齊。 當一行中的全部flex item都是不靈活的，或者都是靈活的，但已經達到最大大小時，它能夠幫助分配剩餘的額外空閒空間。當項目溢出行時，它還對它們的對齊方式施加一些控制。	這是flex-growth、flex-shrink和flex-base組合的簡寫。 第二個和第三個參數(flex-shrink和flex-base)是可選的。默認值是0 1 auto。
.container{ justify-content: flex-start / felx-end / center / space-around / space-evently; } flex-start(默認)：item向行的開始彙集flex-end：item往行尾彙集 center：item在行內居中 space-between：item在行內均勻分佈，第一個在行首，最後一個在行尾 space-around：item在行內均勻分佈，周圍空間相等，在視覺上並非相等的 space-evently：item是均勻分佈的，任何兩個item之間的間距(以及邊緣的空間)是相等的	.item{ flex: none
align-items	flex-atart
這定義了flex item如何沿着當前行上的交叉軸的默認行爲。 能夠將其視爲交叉軸(垂直於主軸)的justify-content版本。	這容許爲單個flex項重寫默認對齊(或由align-items指定的對齊)
.container{ align-items: stretch / flex-start / flex-end / center / baseline; } stretch(默認)：拉伸填充容器(仍然考慮最小寬度/最大寬度) flex-start：item以cross-start邊爲邊對齊 flex-end：item以cross-end線爲邊對齊 center：item在cross-axis居中 baseline：item沿它們的基線對齊	.item{ align-self: auto / flex-start /flex-end / center / baseline / stretch; } 注意：float、clear、vertical對一個flex item沒有影響
align-content
當交叉軸中有額外的空間時，這將使flex容器的行對齊，相似於調整內容在主軸中對齊單個條目的方式 注意：
.container{ aligbn-content: flex-start / flex-end / center / space-between / space-around / stretch; } flex-satrt：行包裝到容器頂部 flex-end：行包裝到容器底部 center：行在容器中 sapce-between：行均勻分佈，第一行在容器頂部，最後一行在容器底部 strecth(默認)：行拉伸填充容器剩餘空間

例子

居中

以一個很簡單的例子解決一個常見的問題：居中顯示

.parent{
  dispaly:flex;
  height:300px;
}
.child{
  width:100px;
  height:100px;
  margin:auto;
  }

這取決於在flex容器中設置margin爲auto的空白會吸取額外的空間。所以，設置auto的垂直邊距將使項目完美地位於兩個軸的中心。

自適應

如今讓咱們使用更多的屬性。考慮一個包含6個項的列表，它們都具備固定的尺寸，可是它們能夠自動調整大小。咱們但願它們均勻地分佈在水平軸上，以便在調整瀏覽器大小時一切正常(沒有媒體查詢!)。

.flex-container{
  dispaly:flex;
  flex-flow:row wrap;
  justify-content:space-around;
}

響應式

咱們再試試其餘的，假如咱們有靠右對齊的導航欄，咱們但願它們在中等尺寸屏幕中居中以及在小屏幕中單列顯示。

.navigation{
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-end;//交叉軸的右邊顯示
}
//中等屏幕
@media all and (max-width:800px){
  .navigation{
    justify-content:space-around;
  }
}
//小屏幕
@media all and (max-width:500px){
  .navigation{
    flex-direction: column;
   }
}

其餘資源

Flexbox in the CSS specifications

Flexbox at MDN