bootstrap 4
CSS 前端工程

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 依然由上往下,但會水平置中

Child 1
Child 2
Child 3

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

Child 1
Child 2
Child 3

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

Child 1
Child 2
Child 3

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

Child 1
Child 2
Child 3

大家有發現嗎?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-nowrapflex-wrapflex-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,歡迎大家追蹤互動~

在創業、職涯、人生的路上,希望大家一起陪伴與成長。