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