Bootstrap 4 Flex

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專 以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

圖片來源 https://laravel-news.com/bootstrap-4-laravel-preset

http://blog.getbootstrap.com/2018/04/09/bootstrap-4-1
Bootstrap 4.1 前幾天釋出了，主要只是新增一些 class 可供使用，沒什麼 major change. larry 只有注意到一點：Added new .flex-fill, .flex-grow-*, and .flex-shrink-* utilities.

我想趁這個機會從頭看一遍 Bootstrap flex utility
https://getbootstrap.com/docs/4.1/utilities/flex

如 native css 一樣，要使用 flexbox, 要在 container 上宣告 class="d-flex" 或是 class="d-inline-flex" (可以看出來 d-inline-flex 是行內元素)

接著你可以指定 flexbox 裡面 children 排列的方向，例如：

• class="d-flex flex-row" (橫排，左到右，這是預設值，一般不用加 flex-row)
• class="d-flex flex-row-reverse" (橫排，右到左)
• class="d-flex flex-column" (直排，上到下)
• class="d-flex flex-column-reverse" (直排，下到上)

這邊 flex-row, flex-column 對應的是 css 的 flex-direction

justify-content 指定左右方向如何分佈

• class="d-flex justify-content-start" (從左到右，這是預設值，一般不用加 justify-content-start)
• class="d-flex justify-content-end" (從右到左)
• class="d-flex justify-content-center" (置中)
• class="d-flex justify-content-between" (平均分配間距)
• class="d-flex justify-content-around" (平均分配間距，且分配的間距再分配到單一 child 的左右)

align-items 指定垂直方向如何分佈

• class="d-flex align-items-start" (從上到下，這是預設值，一般不用加 justify-content-start)
• class="d-flex align-items-end" (從下到上)
• class="d-flex align-items-center" (垂直置中)
• class="d-flex align-items-baseline" (這比較特殊，不常用，有興趣的朋友請自行 study)
• class="d-flex align-items-stretch" (所有 children 垂直方向佔滿 container)

到這邊大家會不會想到一個問題，如果 flex-column 搭配 align-items-center 會如何？(以下使用 native css 測試，如果 Bootstrap 的 css class 結果不一樣請讓我知道 🙂

flex-direction: column 搭配 align-items: center，3個 children 依然由上往下，但會水平置中

flex-direction: column 搭配 justify-content: center，3個 children 會垂直置中

flex-direction: column 搭配 justify-content: flex-end，3個 children 會向下對齊

flex-direction: column 搭配 justify-content: center 且 align-items: center，3個 children 會水平且垂直置中

大家有發現嗎？justify-content 是管水平方向對齊的，align-items 是管垂直方向對齊的。但當 flex-direction: column 時，justify-content 與 align-items 管的方向顛倒了。

align-self 下在 child 身上，可以指定單一 child 的對齊方式

• class="align-self-start"
• class="align-self-end"
• class="align-self-center"
• class="align-self-baseline"
• class="align-self-stretch"

flex-fill 是 Bootstrap 4.1 新的 css class，下在 child 身上，就是 flex:1，等分占滿的意思。

flex-grow-*，flex-shrink-* (* 只能是 0 或 1) 也是 Bootstrap 4.1 新的 css class，下在 child 身上，對應 native css 的 flex-grow，flex-shrink。

官方文件有提到，justify-content，align-items 與 margin-(top)(bottom)(left)(right): auto 組合會有很多不同的排列效果。

flex-wrap 的部分有 flex-nowrap，flex-wrap，flex-wrap-reverse。下在 container 身上，管理 children 是否換行。

children 可以下 order-* (* 可以是 1 ~ 12)，指定 children 的排列順序。

align-content 操縱的是 children 的對齊線，跟 align-items 不同的是 align-items 以 children 為單位去做對齊，而 align-content 操縱的是行線。

• class="align-content-start"
• class="align-content-end"
• class="align-content-center"
• class="align-content-around"
• class="align-content-stretch"

以上就是 Bootstrap 4.1 flex utility 所有內容。簡短結論一下吧，flexbox 是好東西，建議對前端有興趣的讀者使用。有很多排列組合，尤其是對齊方面，不要糾結他們，或是死背什麼，一切還是以設計和真實的需求為主～

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專 以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~