本教程案例線上演示

有路網PC端
有路網移動端

免費配套視訊教程

免費配套視訊教程

教程配套原始碼資源

教程配套原始碼資源

Flex容器

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

這就是一個無序列表(ul

)裡有三個列表元素(li)。

你可以把ul稱為父元素，li稱為子元素。

要開始使用Flexbox，必須先讓父元素變成一個Flex容器。

你可以在父元素中顯式的設定display:flex或者display:inline-flex。這樣你就可以開始使用Flexbox模組。

實際是顯式聲明瞭Flex容器之後，一個Flexbox格式化上下文（Flexbox formatting context）就立即啟動了。

使用一個無序列表(ul)和一群列表元素(li)，啟動Flexbox格式化上下文的方式如下：

/* 宣告父元素為flex容器 */
ul {
    display:flex; /*或者 inline-flex*/
}

 

給列表元素(li)新增一點基本樣式。

li {
    width: 100px;
    height: 100px;
    background-color: #8cacea;
    margin: 8px;
    list-style: none;
}

你將看到的效果如下圖所示：

預設情況下，li是塊級元素，在CSS中垂直排布的，也就是說從上到下排列顯示，就像下圖這樣：

然而，簡單的寫一行程式碼display:flex，你立即就可以看到佈局改變了。

現在列表元素(li)水平排列，從左到右。

Flexbox模組的開始，正如前面的介紹，在任何父元素上使用display:flex。

一旦你顯式的設定了display

屬性的值為flex，無序列表ul就會自動變成Flex容器，而其子元素（在本例中是指列表元素li）就變成了Flex專案。

使用了兩個關鍵詞，我們把重點放到他們身上。瞭解他們對於理解後面的知識至關重要。

• Flex容器（Flex Container）：父元素顯式設定了display:flex
• Flex專案（Flex Items）：Flex容器內的子元素

這些只是Flexbox模組的基礎。

Flex容器屬性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

通過上面的內容，我們瞭解了一些基礎知識。知道了Flex容器和Flex專案是什麼，以及如何啟動Flexbox模組。

有設定一個父元素作為一個Flex容器，幾個對齊屬性可以使用在Flex容器上。

正如你的塊元素的width設定了200px，有六種不同的屬性可以用於Flex容器。

flex-direction

flex-direction屬性控制Flex專案沿著主軸（Main Axis）的排列方向。

它具有四個值：

/* ul 是一個flex容器 */
ul {
    flex-direction: row || column || row-reverse || column-reverse;
}

簡單點來說，就是flex-direction屬性讓你決定Flex專案如何排列。它可以是行（水平）、列（垂直）或者行和列的反向。

從技術上講，水平和垂直在Flex世界中不是什麼方向（概念）。它們常常被稱為主軸（Main-Axis）和側軸（Cross-Axis）。預設設定如下所示。

通俗的說，感覺Main-Axis就是水平方向，從左到右，這也是預設方向。Cross-Axis是垂直方向，從上往下。

預設情況下，flex-direction屬性的值是row。它讓Flex專案沿著Main-Axis排列（從左向右，水平排列）。這就解釋了本文開始部分時無序列表的表現效果。

儘管flex-direction屬性並沒有顯式的設定，但它的預設值是row。Flex專案將沿著Main-Axis從左向右水平排列。

如果把flex-direction的屬性值修改成column，這時Flex專案將沿著Cross-Axis從上到下垂直排列。不再是從左向右排列。

flex-wrap

flex-wrap屬性有三個屬性值：

ul {
    flex-wrap: wrap || nowrap || wrap-reverse;
}

我將通過一個例子來解釋如何使用flex-wrap屬性。首先在前面的無序列表的HTML結構中多新增幾個列表項li。

<ul> <!--parent element-->
    <li></li> <!--first child element-->
    <li></li> <!--second child element-->
    <li></li> <!--third child element-->
    <li></li>
    <li></li>
    <li></li>
</ul>

幸運的是，新新增的Flex專案剛好適合Flex容器大小。也就是Flex專案能剛好填充Flex容器。

再深入一點。

繼續給Flex容器內新增Flex專案，比如說新增到10個Flex專案。這個時候會發生什麼？

<ul> <!--parent element-->
    <li></li> <!--first child element-->
    <li></li> <!--second child element-->
    <li></li> <!--third child element-->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

同樣的，Flex容器還是能容納所有的子元素（Flex專案）排列，這是每一個Flex容器的預設行為。Flex容器會在一行內容納所有的Flex專案。這是因為flex-wrap屬性的預設值是nowrap。也就是說，Flex專案在Flex容器內不換行排列。

ul {
    flex-wrap: nowrap; /*Flex容器內的Flex專案不換行排列*/
}

no-wrap不是不可改變的。我們可以改變。

當你希望Flex容器內的Flex專案達到一定數量時，能換行排列。當Flex容器中沒有足夠的空間放置Flex專案（Flex專案預設寬度），那麼Flex專案將會換行排列。把它（flex-wrap）的值設定為wrap就有這種可能：

ul {
    flex-wrap: wrap;
}

現在Flex專案在Flex容器中就會多行排列。

在這種情況下，當一行再不能包含所有列表項的預設寬度，他們就會多行排列。即使調整瀏覽器大小。

就是這樣子。注意：Flex專案現在顯示的寬度是他們的預設寬度。也沒有必要強迫一行有多少個Flex專案。

除此之外，還有一個值：wrap-reverse。

是的，你猜對了。它讓Flex專案在容器中多行排列，只是方向是反的。

flex-flow

flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性。

你還記得使用border的速記寫法？border: 1px solid red。這裡的概念是相同的，多個值寫在同一行，比如下面的示例：

ul {
    flex-flow: row wrap;
}

相當於：

ul {
    flex-direction: row;
    flex-wrap: wrap;
}

除了這個組合之外，你還可以嘗試一些其它的組合。flex-flow: row nowrap，flex-flow: column wrap，flex-flow: column nowrap。

justify-content

Flexbox模組真得很好。如果你仍然不相信它的魅力，那麼justify-content屬性可能會說服你。

justify-content屬性可以接受下面五個值之一：

ul {
    justify-content: flex-start || flex-end || center || space-between || space-around
}

justify-content屬性又能給我們帶來什麼呢？提醒你一下，你是否還記得text-align屬性。其實justify-content屬性主要定義了Flex專案在Main-Axis上的對齊方式。

來看一個簡單的例子，還是考慮下面這個簡單的無序列表：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

新增一些基本樣式：

ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    background-color: #e8e8e9;
}
li {
    background-color: #8cacea;
    width: 100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
}

你將看到的效果是這樣：

通過justify-content屬性，可以讓Flex專案在整個Main-Axis上按照我自己的慾望設定其對齊方式。

可能會有以下幾種型別。

flex-start

justify-content的預設屬性值是flex-start。

flex-start讓所有Flex專案靠Main-Axis開始邊緣（左對齊）。

ul {
    justify-content: flex-start;
}

flex-end

flex-end讓所有Flex專案靠Main-Axis結束邊緣（右對齊）。

ul {
    justify-content: flex-end;
}

center

和你預期的一樣，center讓所有Flex專案排在Main-Axis中間（居中對齊）。

ul {
    justify-content: center;
}

space-between

space-between讓除了第一個和最一個Flex專案的兩者間間距相同（兩端對齊）。

ul {
    justify-content: space-between;
}

你注意到有什麼不同？看看下圖的描述：

space-around

最後，space-around讓每個Flex專案具有相同的空間。

ul {
    justify-content: space-around;
}

和space-between有點不同，第一個Flex專案和最後一個Flex專案距Main-Axis開始邊緣和結束邊緣的的間距是其他相鄰Flex專案間距的一半。看看下圖的描述：

align-items

align-items屬性類似於justify-content屬性。只有理解了justify-content屬性，才能更好的理解這個屬性。

align-items屬性可以接受這些屬性值：flex-start || flex-end || center || stretch || baseline。

ul {
    align-items: flex-start || flex-end || center || stretch || baseline
}

它主要用來控制Flex專案在Cross-Axis對齊方式。這也是align-items和justify-content兩個屬性之間的不同之處。

下面是不同的值對Flex專案產生的影響。不要忘記這些屬性只對Cross-Axis軸有影響。

首先，讓我們設定ul的高度高於li的高度

ul {
      height: 200px;
    }

stretch

align-items的預設值是stretch。讓所有的Flex專案高度和Flex容器高度一樣。

flex-start

正如你所希望的flex-start讓所有Flex專案靠Cross-Axis開始邊緣（頂部對齊）。

flex-end

flex-end讓所有Flex專案靠Cross-Axis結束邊緣（底部對齊）。

center

center讓Flex專案在Cross-Axis中間（居中對齊）。

baseline

讓所有Flex專案在Cross-Axis上沿著他們自己的基線對齊。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      border: 1px solid red;
      display: flex;
      height: 200px;
      align-items: baseline;
    }
    li {
    width: 100px;
    background-color: #8cacea;
    margin: 8px;
    list-style: none;
    font-size: 28px;
  }
  li:nth-child(2){
    font-size: 12px;
  }
  </style>
</head>
<body>
  <ul> <!--parent element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333 33 </li> <!--third child element-->
  </ul>
</body>
</html>

結果看上去有點像flex-start，但略有不同。那“baseline”到底是什麼呢？下圖應該能幫助你更好的理解。

align-content

還記得前面討論的wrap屬性嗎？我們在Flex容器中添加了更多的Flex專案。讓Flex容器中的Flex專案多行排列。

align-content屬性用於多行的Flex容器。它也是用來控制Flex專案在Flex容器裡的排列方式，排列效果和align-items值一樣，但除了baseline屬性值。

像align-items屬性一樣，它的預設值是stretch。你現在應該熟悉這些值。那它又是如何影響Flex容器裡的10個Flex專案多行排列方式。

stretch

使用stretch會拉伸Flex專案，讓他們沿著Cross-Axis適應Flex容器可用的空間。

你看到的Flex專案間的間距，是Flex專案自身設定的margin值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      border: 1px solid red;
      display: flex;
      height: 400px;
      flex-wrap: wrap;
      align-content:center;
    }
    li {
    width: 100px;
    background-color: #8cacea;
    margin: 8px;
    list-style: none;
    font-size: 28px;
  }
  li:nth-child(2){
    font-size: 12px;
  }
  </style>
</head>
<body>
  <ul> <!--parent element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333</li> <!--third child element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333 33 </li> <!--third child element-->
    <li>1</li> <!--first child element-->
    <li>2</li> <!--second child element-->
    <li>333 33333 33 </li> <!--third child element-->
  </ul>
</body>
</html>

flex-start

之前你看到過flex-start。這次是讓多行Flex專案靠Cross-Axis開始邊緣。沿著Cross-Axis從上到下排列。因此Flex專案在Flex容器中頂部對齊。

flex-end

flex-end剛好和flex-start相反，讓多行Flex專案靠著Cross-Axis結束位置。讓Flex專案沿著Cross-Axis從下到上排列，即底部對齊。

center

你猜到了，center讓多行Flex專案在Cross-Axis中間。在Flex容器中居中對齊。

這是Flex容器的最後一個屬性。你現在知道如何使用各種Flex容器屬性。你可以在工作中實踐這些屬性。

Flex專案屬性

flex-grow || flex-shrink || flex-basis

現在我們把注意力從Flex容器轉移到Flex專案及其對齊屬性。

像Flex容器，對齊屬性也可以用在所有的Flex專案。

flex-grow 和 flex-shrink

flex-grow和flex-shrink屬性控制Flex專案在容器有多餘的空間如何放大（擴充套件），在沒有額外空間又如何縮小。

他們可能接受0或者大於0的任何正數。0 || positive number。

接下來闡述它們的使用。使用一個簡單的無序列表做為例子，它只包含一個列表項。

ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;

}
li {
    background-color: #8cacea;
    height: 100px;
    margin: 8px;
    padding: 10px;
}
<ul>
    <li>I am a simple list</li>
</ul>

新增更多的樣式，看起來像這樣：

預設情況下，flex-grow屬性值設定為0。表示Flex專案不會增長，填充Flex容器可用空間。取值為0就是一個開和關的按鈕。表示flex-grow開關是關閉的。

如果把flex-grow的值設定為1，會發生：

現在Flex專案擴充套件了，佔據了Flex容器所有可用空間。也就是說開關打開了。如果你試著調整你瀏覽器的大小，Flex專案也會縮小，以適應新的螢幕寬度。

為什麼？預設情況下，flex-shrink的值是1，也就是說flex-shrink開關也是開啟的。

可以仔細看看flex-grow和flex-shrink屬性在各種情況下的效果，這樣能更好的幫助你理解。

flex-basis

flex-basis屬性可以指定Flex專案的初始大小。也就是flex-grow和flex-shrink屬性調整它的大小以適應Flex容器之前。

flex-basis預設的值是auto。flex-basis可以取任何用於width屬性的任何值。比如 % || em || rem || px等。

注意：如果flex-basis屬性的值是0時，也需要使用單位。即flex-basis: 0px不能寫成flex-basis:0。

這裡同樣使用只有一個列表項的列表做為示例。

  /* 宣告父元素為flex容器 */
    ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;

}
li {
    background-color: #8cacea;
    height: 100px;
    margin: 8px;
    padding: 10px;
}
<ul>
    <li>I am a simple list</li>
</ul>

預設情況，Flex專案的初始寬度由flex-basis的預設值決定，即：flex-basis: auto。Flex專案寬度的計算是基於內容的多少來自動計算（很明顯，加上了padding值）。

這意味著，如果你增加Flex專案中的內容，它可以自動調整大小。

<ul>
    <li>I am a simple list AND I am a simple list</li>
</ul>

然而，如果你想將Flex專案設定一個固定的寬度，你也可以這樣做：

li {
    flex-basis: 150px;
}

現在Flex專案的寬度受到了限制，它的寬度是150px。

flex速記

flex是flex-grow、flex-shrink和flex-basis三個屬性的速記（簡寫）。

在適當的時候，我建議你使用flex，這樣比使用三個屬性方便。

li {
    flex: 0 1 auto;
}

上面的程式碼相當於：

li {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

注意它們之間的順序。flex-grow第一，然後是flex-shrink，最後是flex-basis。縮寫成GSB，可以幫助你更好的記憶。

如果flex屬性值中少一個值，會發生什麼呢？

如果你只設置了flex-grow和flex-shrink值，flex-basis可能是預設值0。這就是所謂的絕對flex專案。只有當你設定了flex-basis，你會得到一個相對flex專案。

/* 這是一個絕對的Flex專案 */
li {
    flex: 1 1; /*flex-basis 預設值為 0*/
}
/* 這是一個相對的Flex專案 */
li {
  flex-basis: 200px; /* 只設置了flex-basis的值 */
}

你肯定想知道相對和絕對的Flex專案是什麼？將在後面回答這個問題。

讓我們看看一些非常有用的flex值。

flex: 0 1 auto

li {
    flex: 0 1 auto;
}

這相當於寫了flex預設屬性值以及所有的Flex專案都是預設行為。

很容易理解這一點，首先看看flex-basis屬性。flex-basis設定為auto，這意味著Flex專案的初始寬度計算是基於內容的大小。

把注意力放到下一個屬性，flex-grow設定為0。這意味著flex-grow不會改變Flex專案的初始寬度。也就是說，flex-grow的開關是關閉的。

flex-grow控制Flex專案的增長，如果其值設定為0，Flex專案不會放大以適應螢幕（Flex容器大小）。

最後，flex-shrink的值是1。也就是說，Flex專案在必要時會縮小。

應用到Flex專案效果就是這樣子：

注意：Flex專案沒有增長（寬度）。如果有必要，如果調整瀏覽器(調小瀏覽器寬度)，Flex專案會自動計算寬度。

flex: 0 0 auto

li {
    flex: 0 0 auto;
}

這個相當於flex: none。

還是老規矩：寬度是被自動計算，不過彈性專案不會伸展或者收縮（因為二者都被設定為零）。伸展和收縮開關都被關掉了。

它基本上是一個固定寬度的元素，其初始寬度是基於彈性專案中內容大小。

看看這個 flex 簡寫是如何影響兩個彈性專案的。一個彈性專案會比另一個容納更多內容。

應該注意到的第一件事情是，這兩個彈性專案的寬度是不同的。因為寬度是基於內容寬度而自動計算的，所以這是預料得到的。

試著縮放一下瀏覽器，你會注意到彈性專案不會收縮其寬度。它們從父元素中突出來了，要看到所有內容，必須橫向滾動瀏覽器。

在縮放瀏覽器時，彈性專案不會收縮，而是從彈性容器中突出來了。

flex: 1 1 auto

這與 flex: auto 專案相同。

還是按我前面立的規矩。即，自動計算初始化寬度，但是如果有必要，會伸展或者收縮以適應整個可用寬度。

伸展和收縮開關打開了，寬度自動被計算。

此時，專案會填滿可用空間，在縮放瀏覽器時也會隨之收縮。剩餘寬度被2個item平均分配，一人一半。

flex: "positive number"

一般應用於有多個彈性專案的情形。

這裡正數可以代表任何正數（沒有引號）。這與 flex: “正數” 1 0 相同。

flex: 2 1 0 與寫為 flex: 2 是一樣的，2 表示任何正數。

li {
    flex: 2 1 0; / *與 flex: 2相同 */
}

與前面我立的規矩一樣，即，將彈性專案的初始寬度設定為零（嗯？沒有寬度？），伸展專案以填滿可用空間，並且最後只要有可能就收縮專案。

彈性專案沒有寬度，那麼寬度該如何計算呢？

這個時候 flex-grow 值就起作用了，它決定彈性專案變寬的程度。由它來負責沒有寬度的問題。

當有多個彈性專案，並且其初始寬度 flex-basis 被設定為基於零的任何值時，比如 0px，使用這種 flex 簡寫更實用。

實際發生的是，彈性專案的寬度被根據 flex-grow 值的比例來計算。

考慮如下兩個列表項標記及 CSS：

<ul>
    <li>I am One</li>
    <li>I am Two</li>
</ul>

  <style>
    /* 宣告父元素為flex容器 */
    ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;

}
li {
    background-color: #8cacea;
    height: 100px;
    margin: 8px;
    padding: 10px;
    /* flex-basis: 150px; */
}
/* 第一個彈性專案 */
li:nth-child(1) {
    flex: 2 1 0; /* 與寫成 flex: 2 相同*/
}

/* 第二個彈性專案 */
li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}
  </style>

記住設定 flex-grow : 1，會讓彈性專案填滿可用空間。伸展開關打開了。

這裡有兩個彈性專案。一個的 flex-grow 屬性值是 1，另一個是 2，那麼會出現啥情況呢？

兩個專案上的伸展開關都打開了。不過，伸展度是不同的，1 和 2。

二者都會填滿可用空間，不過是按比例的。

它是這樣工作的：前一個佔 1/3 的可用空間，後一個佔 2/3 的可用空間。

即使兩個彈性專案內容一樣大（近似），它們所佔空間還是不同。寬度不是基於內容的大小，而是伸展值。一個是另一個的約兩倍。

絕對和相對Flex專案

前面瞭解了一些基本概念，但重要的是要澄清一些重要的概念。那絕對和相對Flex專案之間到底有啥區別呢？二者之間主要的區別在於間距及如何計算間距。

一個相對Flex專案內的間距是根據它的內容大小來計算的。而在絕對Flex專案中，只根據 flex 屬性來計算，而不是內容。

考慮如下的標記：

<ul>
    <li>
        This is just some random text  to buttress the point being explained.
    Some more random text to buttress the point being explained.
    </li>

    <li>This is just a shorter random text.</li>
</ul>

兩個列表項元素，一個比另一個的文字多得多。

加點樣式：

ul {
    display: flex; /*觸發彈性盒*/
}

li {
    flex: auto; /*記住這與 flex: 1 1 auto; 相同*/
    border: 2px solid red;
    margin: 2em;
}

如下是結果：

如果你已經忘了的話，flex: 1 1 auto 是與 flex-grow: 1、flex-shrink: 1 和 flex-basis: auto 相同的。

Flex專案的初始寬度是被自動計算的（flex-basis: auto），然後會伸展以適應可用空間（flex-grow: 1）。

當Flex專案因為被設定為 flex-basis: auto，而導致寬度被自動計算時，是基於Flex專案內包含的內容的大小而計算。

上面示例中Flex專案的內容大小不相同。因此，Flex專案的大小就會不相等。

既然各個寬度開始就不是相等的（它是基於內容的），那麼當專案伸展時，寬度也保持不相等。

可以試試讓兩個li的內容相同再試試。

上面示例中的Flex專案是相對Flex專案。

下面我們把Flex專案變成絕對的, 就是說這次它們的寬度是基於 flex 屬性，而不是內容的大小。一行程式碼就可以出奇跡。

li {
    flex: 1 ; /*與 flex: 1 1 0 相同*/
}

效果如下：

這次看到兩個Flex專案的寬度相同了嗎？

Flex專案的初始寬度是零（flex-basis: 0），並且它們會伸展以適應可用空間。當有兩到多個Flex專案的 flex-basis 取值為0時，它們會基於 flex-grow值共享可用空間。

現在寬度不會基於內容大小而計算，而是基於指定的 flex 屬性值來計算。

絕對Flex專案的寬度只基於 flex 屬性，而相對Flex專案的寬度基於初始內容大小。

Auto-margin 對齊

當心Flex專案上的 margin: auto 對齊。當在Flex專案上使用 margin: auto 時，事情看起來就很怪異了。

你需要理解會發生什麼。它會導致不可預料的結果，不過我打算解釋解釋。

當在Flex專案上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會佔據所有剩餘空間。

這玩意有點難理解。下面我來說明一下。

考慮如下的導航欄標記以及 CSS 樣式：

<ul>
    <li>Branding</li>
    <li>Home</li>
    <li>Services</li>
    <li>About</li>
    <li>Contact</li>
</ul>

  <style>
    /* 宣告父元素為flex容器 */
    ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;

}
li {
    background-color: #8cacea;
    margin: 8px;
    padding: 10px;
    flex: 0 0 auto;
    border: 2px solid red;
}

  </style>

你可以看到如下的效果：

這裡有幾件事情要注意：

• flex-grow 值為設定為0。這就解釋了為什麼列表項不會伸展。
• Flex專案向Main-Axis的開頭對齊（這是預設行為）。
• 由於專案被對齊到Main-Axis開頭，右邊就有一些多餘的空間。看到了吧？

現在在第一個列表項（branding）上使用 margin: auto，看看會出啥情況。

li:nth-child(1) {
    margin-right: auto; /*只應用到右外邊距*/
}

剛剛發生了什麼？之前的剩餘空間現在已經被分配到第一個Flex專案的右邊了。

還記得我前面說的話吧？當在Flex專案上使用 margin: auto 時，值為 auto 的方向（左、右或者二者都是）會佔據所有剩餘空間。

如果想讓一個Flex專案的兩邊都用自動外邊距對齊，該怎麼辦呢？

/* 如果願意的話，也可以用 margin 簡寫來設定兩個邊 */
li:nth-child(1) {
    margin-left: auto;
    margin-right: auto
}

現在空白被分配到Flex專案的兩邊了。

那麼，這是不是對很酷的自動外邊距對齊的一種折衷方案呢？看起來是。如果沒注意的話，它也可能是受挫之源。當在一個Flex專案上使用自動外邊距（margin: auto）時，justify-content 屬性就不起作用了。

例如，在上面的Flex容器上通過 justify-content 屬性，設定不同的對齊選項時，對佈局沒有影響。

ul {
    justify-content: flex-end;
}

Flexbox實戰

導航系統是每個網站或者應用程式的重要組成部分。這個世界上的每個網站都會有某種導航系統。

下面我們看看這些熱門網站，以及它們是如何實現其導航系統的。你看到Flexbox是如何幫助你更高效地建立這些佈局嗎？

也仔細看看哪裡會用得上自動外邊距特性。

Bootstrap導航

AirBnB PC端導航

Twitter PC端導航

建議你自己寫程式碼。試著自己實現這些導航系統。

切換flex-direction會發生什麼？

還記得我說過預設的Main-Axis方向是從左到右，Cross-Axis方向是從上到下吧？

好吧，現在你也可以改變這個方向。

正如在較早的小節中所描述的那樣，用 flex-direction: column 時，確實是這樣。

當用 flex-direction: column 時，Main-Axis和Cross-Axis會向如下所看到的那樣改變：

如果曾用英語寫過文字，那麼你就知道英語是從左到右，從上到下來寫的。

Flexbox的預設Main-Axis和Cross-Axis也是採用同樣的方向。

不過，如果將 flex-direction 切換為 column，它就不再遵循英語的正規化，而是日語的正規化！

是的，日語。

如果你用日語寫過文字，那麼應該很熟悉了。（鄭重宣告，我從沒用過日語寫過文字）。

日文通常是從上到下寫的！沒那麼怪，對吧？

這就解釋了為嘛這對英語寫作者可能有點惱火。

看看下面這個例子。標準無序列表(ul)，帶有 3 個列表項(li)。不過這次我要改變一下flex-direction。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

 <style>
    /* 宣告父元素為flex容器 */
    ul {
    display:flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    flex-direction: column;

}
li {
    background-color: #8cacea;
    margin: 8px;
    padding: 10px;
    flex: 0 0 auto;
    border: 2px solid red;
}
  </style>

如下是方向變化之前的樣子：

如下是方向變化之後的樣子：

現在文字是以日語風格寫的：沿Main-Axis從上到下。

你會看到專案的寬度填滿了空間，對吧？

如果在之前要變成這樣子，得處理 flex-basis 以及 flex-grow 屬性。

下面來看看這些會如何影響新的佈局。

li {
    flex-basis: 100px;
}

下面是你會得到的。

什麼？高度是被影響了，但是寬度沒有啊？我之前說過，flex-basis 屬性定義每個Flex專案的初始寬度。

在切換 flex-direction 時，請注意，影響Main-Axis的每一個屬性現在會影響新Main-Axis。像 flex-basis 這種會影響Main-Axis上Flex專案寬度的屬性，現在會影響專案的高度，而不是寬度。

方向已經被切換了！

所以，即使你使用 flex-grow 屬性，它也是影響高度。本質上，每個作用於橫向軸（即Main-Axis）上的 flex 屬性，現在都會作用於縱向上的新Main-Axis。它只是在方向上的一個切換。

這裡再來一個例子。我發誓在這個例子之後你會有更好的理解。減少之前看到過的Flex專案的寬度，它們就不再填滿整個空間了：

li {
    width: 200px;
}

如果想把列表項移到螢幕中間該怎麼辦呢？

在英語中，這是你到目前為止處理彈性容器的方式。就是說， 把Flex專案移到Main-Axis的中間 。

所以，你會用 justify-content: center。但是這樣做不起作用。因為方向變了，中心是沿著Cross-Axis，而不是Main-Axis。

再來看看：

所以請用日語文字來思考。Main-Axis是從上到下，你不需要這樣。Cross-Axis是從左到右。貌似是你所要的。

你需要 把Flex專案移到Cross-Axis的中間 。這裡想起哪個Flex容器屬性了麼？

是的，align-items 屬性。align-items 屬性處理Cross-Axis上的對齊。

所以要把這些專案移到中間，得這樣做：

li {
    align-items: center;
}

瞧瞧！Flex專案已經居中了吧。

參考：
https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.pr6cltk9j