bootstrap 4
CSS 前端工程

Bootstrap 4 Flex

圖片來源 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: center 且 align-items: center 3 個 children 會水平且垂直置中

Child 1
Child 2
Child 3

大家有發現嗎?justify-content 是管水平方向對齊的,align-items 是管垂直方向對齊的。但當 flex-direction: column 時,justify-content 與 align-items 管的方向顛倒了。大家也可以自行試一下 flex-direction: row 搭配 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-send”
class=”align-content-center”
class=”align-content-around”
class=”align-content-stretch”

以上就是 Bootstrap 4.1 flex utility 所有內容。簡短結論一下吧, flexbox 是好東西,建議對前端有興趣的朋友要使用。有很多排列組合,尤其是對齊方面,但不用糾結在其中,一切還是以設計和實務需求來做驅動。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。