Flexbox——快速佈局神器

簡介

在不少方面HTML和CSS是一個強大的內容發佈機制——易學、靈活和強大。但複雜的佈局是他不擅長的。若是你想建立一個簡單的圖片與文本的佈局，那麼還算簡單，可是製做一個複雜的多列布局，要作的衆多瀏覽器的兼容一致那仍是很複雜的。咱們一般都是使用浮動或者其餘方法來實現這個目的，而其中出現的bug和瀏覽器的差別性使用對佈局失去興趣。

爲了應對這種狀況，CSS3包含了許多模塊，使用不一樣的佈局更加容易。咱們已經在其餘文章中看到多欄佈局和媒體生成的內容分頁，如今咱們將注意力轉向CSS3的 Flexbox佈局模塊。

Flexbox一般能讓咱們更好的操做他的子元素佈局，例如：

1. 若是元素容器沒有足夠的空間，咱們無需計算每一個元素的寬度，就能夠設置他們在同一行；
2. 能夠快速讓他們佈局在一列；
3. 能夠方便讓他們對齊容器的左、右、中間等；
4. 無需修改結構就能夠改變他們的顯示順序；
5. 若是元素容器設置百分比和視窗大小改變，不用提心未指定元素的確切寬度而破壞佈局，由於容器中的每一個子元素均可以自動分配容器的寬度或高度的比例。

聽起來至關有用，不是嗎？接下來讓咱們更詳細的探索它。

注：這篇文章使用的是Flexbox最後語法，目前支持瀏覽器：Opera Mobile12.1+、Opera12.5+、Firefox18+（partial）和chrome。Chrome須要添加瀏覽器前綴「-webkit-」,Opera支持標準語法，不用添加任何前綴。Firefox有部分支持，也須要添加前綴「-moz-」，同時須要設置一個標誌（到firefox瀏覽器地址欄中輸入：about:config，搜索「flexbox」，找到以後雙擊「layout.css.flexbox.enabled」，設置他的「value」值爲「true」）。注意，其餘瀏覽器除了opera自2009年支持flexbox以來，都使用舊的語法規則，真的不該該使用這些過期的語法。必定要記住閱讀和使用2012年之前有關於flexbox的文章和代碼時，flexbox都使用的老語法。Chris Coyie有一篇文章《「Old」 Flexbox and 「New」 Flexbox》，這篇文章能更好的告訴你如何閱讀一個過期的文章。

lexbox的術語

在詳細閱讀這篇文章以前，咱們頗有必要先了解flexbox的幾個經常使用術語，這樣有助於你們對後文的理解。

1. 伸縮容器：一個設有「display:flex」或「display:inline-flex」的元素
2. 伸縮項目：伸縮容器的子元素
3. 主軸、主軸方向：用戶代理沿着一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。
4. 主軸起點、主軸終點：伸縮項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
5. 主軸長度、主軸長度屬性：伸縮項目的在主軸方向的寬度或高度就是項目的主軸長度，伸縮項目的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。
6. 側軸、側軸方向：與主軸垂直的軸稱做側軸，是側軸方向的延伸。
7. 側軸起點、側軸終點：填滿項目的伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
8. 側軸長度、側軸長度屬性：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是「width」或「height」屬性，由哪個對着側軸方向決定。

下圖是一個row伸縮容器中各類方向與大小術語的示意圖：

一個簡單的Flex例子

在製做flex例子開始，先讓咱們考慮一個簡單的示例來講明flexbox佈局的容易性。咱們來看一個「內容布富」的頁腳，這個頁腳包含了三個子元素，這種而腳的類型也是至關的典型。讓咱們去接觸細節，這個頁腳包含了連接、聯繫信息和版權聲明。咱們想把這三個元素顯示在一個水平線上，而且但願連接部分的寬度是其餘兩個內容寬度的兩倍。今天以前咱們經常經過浮動子元素，設置子元素寬度，並使用不一樣的margin或padding來調整對齊。在全部的維度，沒有固定的寬度值，這樣每每是不許確的，也讓事情變得更僵化。但Flexbox在這裏就能夠幫助咱們實現須要的效果。

我製做的flexible例子。例子很簡單，除了頁腳，還有一個包含三個盒子的flexible佈局。

注：看看我最終實現的例子(如上圖所示)。你能夠看到一個美麗的設計，主內容一列和頁腳經過「position:fixed」固定在頁面底部。佈局靈活，頁面的頁腳子元素比例能夠根據主要內容列的百分比進行調整。您還會注意到，我用了一些媒體查詢來轉變小屏幕寬度的佈局。

開始使用Flexbox

咱們如何開始使用Flexbox呢？大多數的Flexbox屬性都應用於父容器的元素上。由於Flexbox，你能夠指定你想要制定的一個容器，使用一個特殊的值顯示屬性，就像這樣：

footer {
  display: flex;
}

接下來你可使用「flex-row」屬性來指定子元素佈局是在一行仍是一列顯示。若是你願意，你能夠定義關鍵詞「wrap」，來指定內容容器在新的一行（當父元素容器過小，flexbox元素想在同一行顯示）。在咱們的例子中，我在footer中設置了「row wrap」

footer {
  display: flex;
  flex-flow: row wrap;
}

有關於flex-flow

flex-flow是用來伸縮行換行，flex-flow屬性是同時設定「flex-direction(伸縮流的方向)」和「flex-wrap（伸縮行換行）」屬性的縮寫，兩個屬性決定了伸縮容器的主軸與側軸。此屬性主要適用於伸縮容器。在這篇文章的例子中，主要是「footer」元素。

有關於flex-direction

flex-direction屬性能夠用來設定伸縮容器的主軸的方向，這也決定了用戶代理配置伸縮項目的方向。主要適用於伸縮容器，主要包括如下幾個值：

1. row:flex-direction的默認值，表示伸縮容器的主軸與當前書寫模式的行內軸（文字佈局的主要主向）。主軸起點與主軸終點方向分別等同於當前書寫模式的始與結方向。
2. row-reverse：表示的是除了主軸起點與主軸終點方向交換之外同row屬性值的做用。
3. column：表示的是伸縮容器的主軸與當前書寫模式的塊軸（塊佈局的主要方向）同向。主軸起點與主軸終點方向分別等同於當前書寫模式的前與後方向。簡單的能夠理解爲列布局。
4. column-reverse：表示的是除了主軸起點與主軸終點方向交換之外同「column」的屬性值做用。

關於flex-wrap

flex-wrap屬性主要用來控制伸縮容器是單行仍是多行，也決定了側軸方向一新的一行的堆放方向。主要適用於伸縮容器，主要包括如下幾個值：

1. nowrap:flex-wrap的默認值，表示的是伸縮容器爲單行。側軸起點方向等同於當前書寫模式的起點或前/頭在側軸的那一邊，而側軸終點方向是側軸起點的相反方向。
2. wrap：表示的是伸縮容器爲多行。側軸起點方向等同於當前書寫模式的起眯或前/頭在側軸的那一邊，而側軸終點方向是側軸起點的相反方向。
3. wrap-reverse：除了側軸起點與側軸終點方向交換之外同wrap所起做用相同。

關鍵詞「wrap」明顯的變得頗有意義。

注：「flex-flow」在這裏採用了縮寫，他主要包括兩個屬性「flex-direction」(值爲row、column、row-reverse和column-reverse，後面的兩個屬性值與row和column方向相反)和「flex-wrap」（值爲：wrap、no-wrap和wrap-reverse）。

主軸和側軸

若是你要想flexbox工做正常，你有些概念必須得清楚，好比說讓flexbox正常工做的主軸和側軸，他們看上去有點像X軸和Y軸，但仍是有所差異的。主軸的方向主要是用來肯定flex的主方向，因此你子元素要麼放置在一行，要麼放置在一列。側軸主要垂直於主軸運行，以下圖所示：

flexbox的主軸與側軸

設置flexbox子元素（伸縮項目）的對齊

Flexbox有一系列的方法來幫助你調整伸縮項目沿着主軸和側軸的對齊。

側軸對齊伸縮項目——align-items

第一個咱們一塊兒看看「align-items」屬性，它充許您調整伸縮項目在側軸的對齊方式，主要包括如下幾個值：

1. flex-start/baseline：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起點的邊。
2. flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。
3. center：伸縮項目的外邊距盒在該行的側軸上居中放置。（若是伸縮行的尺寸小於伸縮項目，則伸縮項目會向兩個方向溢出相同的量）。
4. stretch：伸縮項目拉伸，填滿整個側軸

關於align-items

能夠用來設置伸縮容器中包括匿名伸縮項目的全部項目的對齊方式。

爲了更形像的理解」align-items」各個屬性值對應在側軸上的效果，能夠參考下圖：

這些都是術語解釋，只有動手去嘗試，調整不一樣的值，才能知道各個屬性值所表明的運行效果，你們能夠看看下圖所運行的效果。對於這個例子，我採用的是「stretch」屬性值。

footer {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

上圖是align-items各個屬性值運行後的效果，從上至下依次是：flex-start、center、flex-and和stretch。

每每全部列表項的內容沒法填滿父元素的整個高度，特別是在不知道寬度和高度的視窗變化之下。不少狀況之下爲了讓這些列實現等高效果，是一件多麼可怕的事情，並且不少時間都浪費在一些呆反的解決方案和處理兼容上，好比說設置一個等高的效果，使用假的列？

主軸對齊伸縮項目——justify-content

還有一個主要屬性「justify-content」使用的也比較多，這個屬性主要用來設置伸縮項目沿主軸的對齊方式，從而調整伸縮項目之間的間距。設置了這個屬性，在主軸方向上設置的任何margin都不會起做用。所以我特地建立了一個例子來證實這點。

在這個例子中，我爲伸縮項目設置了一個百分比寬度：

#first {
  width: 25%;
}
    
#second {
  width: 40%;
}
     
 #third {
  width: 25%;
}

而後在伸縮容器設置了一個值，證實伸縮項目在主軸方向的margin不起做用：

footer {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: space-around;
}

這個值至關的不錯，伸縮項目會平均地分佈在行裏，兩端保留一半的空間。其餘可用的值以下：

1. flex-start：伸縮項目向一行的起始位置靠齊。該行的第一個伸縮項目在主軸起點邊的外邊距與該行在主軸起點的邊對齊，同時全部後續的伸縮項目與其前一個項目對齊。
2. flex-end：伸縮項目向一行的結束位置靠齊。該行的最後一個伸縮項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊，同時全部前面的伸縮項目與其後一個項目對齊。
3. center：伸縮項目向一行的中間位置靠齊。該行的伸縮項目將相互對齊並在行中居中對齊，同時第一個項目與該行的在主軸起點的邊的距離等同與最後一個項目與該行在主軸終點的邊的距離（若是剩餘空間是負數，則保持兩端溢出的長度相等）。
4. space-between：伸縮項目會平均地分佈在一行裏。若是剩餘空間是負數，或該行只有一個伸縮項目，則此值等效於「flex-start」。在其它狀況下，第一個項目在主軸起點邊的外邊距會與該行在主軸起點的邊對齊，同時最後一個項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊，而剩下的伸縮項目在確保兩兩之間的空白空間相等下平均分佈。

經過伸縮容器中的三個不一樣顏色的項目，展現五種「justify-content」關鍵字的效果。

你也能夠在實例中本身動手嘗試一下，這幾個值給伸縮項目在主軸上會帶來什麼樣的變化，下圖是示例中五種不一樣屬性值效果的截圖：

上圖是「justify-content」五種屬性值的效果，從上到下依次是：flex-start、center、flex-end、space-between和space-around。

伸縮項目堆棧伸縮行——align-content

您還能夠調準伸縮行在伸縮容器裏的對齊方式。不過他會更改flex-wrap的行爲，好比說：「wrap」。align-content和align-items類似，可是不是對齊伸縮項目，它對齊的是伸縮行，其主要包括如下幾個值：

1. flex-start：各行向伸縮容器的起點位置堆疊。伸縮容器中第一行在側軸起點的邊會緊靠住伸縮容器在側軸起點的邊，以後的每一行都緊靠住前面一行。
2. flex-end：各行向伸縮容器的結束位置堆疊。伸縮容器中最後一行在側軸終點的邊會緊靠住該伸縮容器在側軸終點的邊，以前的每一行都緊靠住後面一行。
3. center：各行向伸縮容器的中間位置堆疊。各行兩兩緊靠住同時在伸縮容器中居中對齊，保持伸縮容器在側軸起點邊的內容邊和第一行之間的距離與該容器在側軸終點邊的內容邊與第最後一行之間的距離相等。（若是剩下的空間是負數，則行的堆疊會向兩個方向溢出的相等距離。）
4. space-between：各行在伸縮容器中平均分佈。若是剩餘的空間是負數或伸縮容器中只有一行，該值等效於「flex-start」。在其它狀況下，第一行在側軸起點的邊會緊靠住伸縮容器在側軸起點邊的內容邊，最後一行在側軸終點的邊會緊靠住伸縮容器在側軸終點的內容邊，剩餘的行在保持兩兩之間的空間相等的情況下排列。
5. space-around：各行在伸縮容器中平均分佈，在兩邊各有一半的空間。若是剩餘的空間是負數或伸縮容器中只有一行，該值等效於「center」。在其它狀況下，各行會在保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半的情況下排列。
6. stretch：各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於「flex-start」。在其它狀況下，剩餘空間被全部行平分，擴大各行的側軸尺寸。

align-content各關鍵字對多行的伸縮容器的效果。

改變元素佈局的順序

傳統上不改變元素的結構要改變元素的佈局順序一直是一個痛苦的事情。不過在Flexbox中，你能夠經過「order」屬性來修改伸縮項目的佈局順序（在不調整結構前提之下）。這個屬性一直接受的整數值——稱爲係數集——也稱爲排序組，會出如今伸縮項目中。拿前面的例子來講，默認狀況連接塊是第二個子元素，以下圖所示：

默認狀況footer子元素排序是：contact、links、copyright。

默認狀況之下，全部的伸縮項目的順序組都是「0」。咱們能夠很容易的給每一個伸縮項目設置不一樣的順序值。更高的值會排在後面，而原來的HTML結構並不會有任何變化。因此在個人示例中，我將連接塊設置了order值爲「1」

#second {
  order: 1;
}

頁腳已作出新的排序：contact、copright、links。

關於order

order屬性是用來設置伸縮項的顯示順序，默認狀態下，用戶代理會用伸縮項目出如今源文檔的次序配置這些伸縮項目。order屬性透過將元素分到有序號的組以控制元素出現的順序。在伸縮佈局中，order屬性控制伸縮項目在伸縮容器裏的順序。

order取值越大，越排在後面。而且order能夠取負值。

使你的元素具備彈性

Flexbox最強大的特性是可以經過「flex-flow」屬性設置伸縮項目的流動方向，或者能夠經過「flex」屬性設置一個可用的空間。它的取值能夠有三個部分（flex-grow、flex-shrink、flex-basis）。讓咱們一個一個來嘗試，看看他們的影響。首先添加的是「flex-grow」:

#first {
  flex: 1;
}
    
#second {
  flex: 1;
}
    
#third {
  flex: 1;
}

這些沒單位的值是做爲一個比例，他們決定於伸縮容器中有多少個伸縮項目。能夠決定伸縮項目在伸縮容器中的空間大小。若是每一個都設置爲1，每一個伸縮項目在伸縮容器內都相等。若是你給其中一個伸縮項目設置爲2，那麼這個伸縮項目會佔用空間是其餘伸縮項目的兩倍。

#first {
  flex: 1;
}
    
#second {
  flex: 2;
}
    
#third {
  flex: 1;
}

你也能夠像下面同樣設置flex-basis的值：

#first {
  flex: 1 200px;
}
    
#second {
  flex: 2 300px;
}
    
#third {
  flex: 1 250px;
}

首先flex-basis的值主要取決於伸縮項目的width或者高，同時取決於流動方向。而後，剩下的空間根據flex-grow給伸縮項目最後寬度來劃分。因此伸縮項目會沿着主軸線大小爲200px、300px和250px,總共750px。若是伸縮容器沿主軸方向是950px,這樣就會多出一個200px空間，那麼這多出的200px空間將分配給伸縮項目。第一個和第三個伸縮項目將獲得50px的空間，由於他的flex-grow值是「1」,他們最終的空間是250px和300px。第二個伸縮項目將得到100px空間，由於他的flex-grow值爲「2」,他的最後空間大小爲400px。

flex的第三部分不多使用，但咱們能夠看看他的使用方法，你也能夠將flex-shrink像下面那樣設置：

#first {
  flex: 1 1 400px;
}
    
#second {
  flex: 2 3 600px;
}
    
#third {
  flex: 1 2 400px;
}

flex-shrink稱爲收縮比率。這個值只有伸縮項目在沒主軸方向溢出伸縮容器纔會發揮做用。他們充當比例值，但這回指的是溢出量，將這個溢出量按比例分配給每一個伸縮項目，用於防止伸縮容器溢出。

好比說，咱們伸縮容器沿主軸方向寬度是1100px，按照上面的示例代碼計算，咱們的伸縮項目會超出300px(伸縮項目沿主軸方向總值爲1400px)，這個時候經過flex-shrink收縮他們：

1. 第一個伸縮項目將獲得溢出量的六分之一，也就是50px，這個時候他的值爲350px(在當初的基礎上減小50px)。
2. 第二個伸縮項目將獲得溢出量的六分之三，也就是150px，這個時候他的值爲450px(在當初的基礎上減小150px)。
3. 第三個伸縮項目將獲得溢出的六分之二，就就是100px，這個時候他的值爲300px(在當初的基礎 上減小100px)。

這樣flex-shrink使用伸縮項目獲得一個較小的寬度。

個人例子中最終將值設置成：

#first {
  flex: 1 0 7rem;
}
    
#second {
  order: 1;
  flex: 2 0 8rem;
}
    
#third {
  flex: 1.5 0 7rem;
}

關於flex

flex用來決定伸縮項目的伸縮性。一個伸縮容器會等比地按照各伸縮項目的擴展比率分配剩餘空間，也會按照收縮比率縮小各項目以免溢出。

flex屬性能夠用來指定伸縮長度的部件：擴展比率flex-grow，收縮比率flex-shrink以及伸縮基準值flex-basis。當一個元素是伸縮項目時，flex屬性將代替主軸長度屬性決定元素的主軸長度。若元素不是伸縮項目，則flex屬性沒有效果。

1. flex-grow：此屬性值爲正數值，用來設置擴展比率，也就是剩餘空間是正值的時候此伸縮項目相對於伸縮容器裏其餘伸縮項目能分配到空間比例。若省略則會被設置爲「1」。
2. flex-shrink：此屬性值爲正數值，用來設置收縮比率，也就是剩餘空間是負值的時候此伸縮項目相對於伸縮容器裏其餘伸縮項目能收縮的空間比例。若省略則會被設置爲「1」，在收縮的時候收縮比率會以伸縮基準值加權。
3. flex-basis：與width屬性使用相同的值，能夠用來設置flex-basis長寫並指定伸縮基準值，也就是根據可伸縮比率計算 出剩餘空間的分佈以前，伸縮項目主軸長度的起始數值。若在flex縮寫省略了此屬性設置，則flex-basis的指定值是「0」，若flex-basis的指定值是「auto」，則伸縮基準值的指定值是元素主軸長度屬性的值。

上圖是一個顯示「絕對」伸縮（以零爲基準值開始）與「相對」伸縮（以項目的內容大小爲基準值開始）差別的圖解。這三個項目的伸縮比例分別是「1」、「1」、「2」。

Flexbox：響應式趨勢

在個人例子中結合一個多行flxbox(flex-flow:row wrap)和伸縮長度flex（如:flex:1 0 7rem）以及媒體查詢實現了一個完美的效果。在不一樣視窗寬度下，伸縮項目在伸縮容器中能夠平滑的進行變化。如圖所示：

flexbox對應的響應式代碼：

footer {
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -webkit-align-items: stretch;
  display: -moz-flex;
  -moz-flex-flow: row wrap;
  -moz-align-items: stretch;
  display: -ms-flex;
  -ms-flex-flow: row wrap;
  -ms-align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

#first {
  -webkit-flex: 1 0 7rem;
  -moz-flex: 1 0 7rem;
  -ms-flex: 1 0 7rem;
  flex: 1 0 7rem;
}

#second {
  -webkit-order: 1;
  -webkit-flex: 2 0 8rem;
  -moz-order: 1;
  -moz-flex: 2 0 8rem;
  -ms-order: 1;
  -ms-flex: 2 0 8rem;
  order: 1;
  flex: 2 0 8rem;
}

#third {
  -webkit-flex: 1.5 0 7rem;
  -moz-flex: 1.5 0 7rem;
  -ms-flex: 1.5 0 7rem;
  flex: 1.5 0 7rem;
}

@media screen and (max-width: 1000px) {
  body {
    width: 100%;
  }
  
  #fixed {
    left: 0%;
	right: 0%;
  }
}

@media screen and (max-width: 520px) {
  #fixed {
   position: static;
  }
  
  section {
   padding: 1rem 2rem;
  }
  
  body {
   padding-bottom: 0;
   background-image: none;
   background-color: white;
  }
  
  footer {
   padding: 0 1rem 0;
  }
  
  #first {
   -webkit-flex: 1 0 10rem;
   -moz-flex: 1 0 10rem;
   -ms-flex: 1 0 10rem;
   flex: 1 0 10rem;
  }

  #second {
   -webkit-flex: 1 0 10rem;
   -moz-flex: 1 0 10rem;
   -ms-flex: 1 0 10rem;
   flex: 1 0 10rem;
  }

  #third {
   -webkit-flex: 1 0 10rem;
   -moz-flex: 1 0 10rem;
   -ms-flex: 1 0 10rem;
   flex: 1 0 10rem;
  }
}

@media screen and (max-width: 380px) {
  section {
    padding: 1rem 1rem;
  }
  
  footer div {
    right: 1rem;
  }
}

flex:auto和flex:initial

flex還有其餘的值，Common values of flex作了詳細的介紹。其中「auto」和「initial」很是有用。設置「flex:auto」時，伸縮容器中的伸縮項目（至關於flex: 1 1 auto）將使用其大小根據任何width/height或者min-width/min-height設定，它將擴展佔用一個比例的任何自由空間可用，但在沒有額外的自由空間將縮小以適應其內容。結合min-width將可能會產生一些有趣的效果，能夠看看flex auto的實例。在這個實例中，父容器設置了「flex-flow:row」，三個子元素設置了「flex:auto」並設置了一個「min-width」。所以無論是多行仍是單行，任何多餘的空間都擴展到伸縮項目上。而後會收縮整齊，由於他變小後，充許子元素從新自適應。

試着將「flex:auto」修改爲「flex:initial」(至關於flex:0 1 auto)，你會看到，當有多餘的空間時，第三個子元素安容器大小再也不增長，但仍然須要收縮。

優雅降級

Flexbox是一個全新的佈局模塊，不識別瀏覽器將會忽略他。這樣看起來是一個破壞者，阻止你使用它。然而，它不須要。例如，你可使用浮動或者表格在桌面系統下佈局你的網站,在小屏幕下選擇使用flexbox,或許只是爲了移動主要內容。

若是你在使用flexbox以前將頁面全部元素（好比：nav、header、footer等）設置成「display:block」，在支持flexbox的瀏覽器會將內容自動伸縮，以適應整個設備的寬度。在不識別flexbox的瀏覽器中會按順序整塊的排列，但並不會影響你的閱讀。

或者，表格能夠把一個元素從源秩序讓內容從開始到結束的排列。看到這樣的例子，你可能會笑的。

總結

我但願這篇文章能夠告訴你使用浮動和清除浮動，這些呆會的佈局技術是如何的可怕，同時也明確的告訴你flexbox是如何的有用。你也能夠看看媒體查詢與flexbox結合實現響應式佈局是多麼的偉大。