深入解析flex-end

一、基本概念

flex-end 是指在 Flex 布局下，使彈性容器（flex container）中的子項（flex item）靠近主軸 (main axis) 的結束位置（end）。

需要注意的是，主軸的方向由 flex-direction 決定，所以 flex-end 的結束位置也會隨之改變。

當彈性容器中所有的子項都設置 align-self:flex-end 時，則它們都會集中在容器的結束位置。

二、應用實例

以下代碼展示了如何使用 flex-end 將一個文本框放在 Flex 容器的右下角：

  <div style="display: flex; width: 300px; height: 200px; border: 1px solid black; justify-content: flex-end; align-items: flex-end;">
    <input type="text" style="margin: 10px;">
  </div>

解釋：

將 div 元素設置為 Flex 容器，然後把 justify-content 屬性設置為 flex-end，這樣容器里的子項就會放在主軸的結束位置。然後再把 align-items 屬性設置為 flex-end，子項就會放在交叉軸的結束位置。

三、flex-wrap 與 flex-flow

flex-wrap 屬性決定如果一條軸線放不下所有的子項，是否允許容器換行，並指定換行方式。

flex-flow 屬性是 flex-wrap 和 flex-direction 的簡寫形式。

以下代碼演示如何使用 flex-wrap 和 flex-flow 與 flex-end 結合使用：

  <div style="display: flex; flex-wrap: wrap-reverse; width: 400px; justify-content: flex-end; align-items: flex-end; border: 1px solid black;">
    <div style="flex: 0 0 150px; background-color: red; height: 50px;"></div>
    <div style="flex: 0 0 150px; background-color: blue; height: 50px;"></div>
    <div style="flex: 0 0 150px; background-color: green; height: 50px;"></div>
    <div style="flex: 0 0 150px; background-color: purple; height: 50px;"></div>
  </div>

解釋：

將 div 設置為 Flex 容器，然後把子項的 flex-wrap 屬性設置為 wrap-reverse，這樣子項就會在軸線上從右往左排列，並在容器的下方換行。

最後，再將 justify-content 屬性設置為 flex-end，子項就會放在主軸的結束位置。再把 align-items 屬性設置為 flex-end，子項就會放在交叉軸的結束位置。

四、flex-grow 和 flex-shrink

flex-grow 屬性決定子項放大的比例，flex-shrink 屬性決定子項縮小的比例。

以下代碼演示如何使用 flex-grow 和 flex-end 結合使用：

  <div style="display: flex; width: 500px; height: 200px; border: 1px solid black; justify-content: flex-end; align-items: flex-end;">
    <div style="flex: 1; background-color: red;"></div>
    <div style="flex: 2; background-color: blue;"></div>
    <div style="flex: 1; background-color: green;"></div>
  </div>

解釋：

將 div 設置為 Flex 容器，然後把子項的 flex-grow 屬性設置為 1 和 2 和 1，這樣第二個子項會比其他兩個子項寬一倍。最後，再將 justify-content 屬性設置為 flex-end，子項就會放在主軸的結束位置。再把 align-items 屬性設置為 flex-end，子項就會放在交叉軸的結束位置。

五、order 屬性

order 屬性定義了容器中子項的排列順序。默認情況下，子項按照它們在 HTML 中出現的順序排列，但可以使用 order 屬性來改變這個順序。

以下代碼演示了如何使用 order 屬性與 flex-end 結合使用：

  <div style="display: flex; width: 400px; height: 200px; border: 1px solid black; align-items: flex-end;">
    <div style="background-color: red; height: 50px; width: 100px; order: 2;"></div>
    <div style="background-color: blue; height: 50px; width: 100px; order: 1;"></div>
    <div style="background-color: green; height: 50px; width: 100px; order: 3;"></div>
  </div>

解釋：

將 div 設置為 Flex 容器，然後把子項的 order 屬性先後設置為 2、1 和 3，這樣子項會按照 order 值的大小從小到大排列。

最後，再將 align-items 屬性設置為 flex-end，子項就會放在交叉軸的結束位置。