Flexbox

esther

A Brief Note of CSS Selector
Noted by myself in the end of 2015.
P.S. NEW CSS Grid Layout is coming soon!
2017/02/15 updated!

實作/範例 * Pinterest Grid with Flexbox * Flex Layout Attribute

Fully(?) Flexbox Properties Introduction

Reference

• CSS-Tricks: Flexbox
• W3 - Flexbox
• CSS參考手冊 - Flexbox
• CSS-Tricks: A Complete Guide to Flexbox
• Flexbox Fundamentals (video)
• Flexbox版面配置
• Flexbox Froggy (learning tool)
• CSS Reference - Flexbox
• Flexbox Grid Finesse
• Flexbox’s Best-Kept Secret
• Vertical Centering (flexbox)
• What is Flexbox
• Floats, Inline Block or Display Table? Or Flexbox?
• Responsive Multi-Column Lists with Flexbox
• Flexbox Grid
• Flexbox.help

Parent (wrap/container)

display: flex

flex-direction

容器內部child排列方向

flex-direction: row(default) 橫向 | ltr 左到右 | rtl 右到左
flex-direction: row-reverse 逆橫向
flex-direction: column 縱向
flex-direction: column-reverse 逆縱向

flex-wrap

容器內部child換行

flex-wrap: nowrap 單行
flex-wrap: wrap 多行
flex-wrap: wrap-reverse 逆向多行

當採 橫向 (row/row-reverse)排列時，需藉由控制容器 寬度 來呈現多行排列模式 當採 縱向 (column/column-reverse)排列時，需藉由控制容器 高度 來呈現多行排列模式

flex-flow

合併flex-direction與flex-wrap，共有4(方向)x3(換行)總組合方式

flex-flow: row wrap
flex-flow: column wrap

justify-content

容器內部 單行 主軸(X軸)對齊

justify-content: flex-start 對齊主軸起始點
justify-content: flex-end 對齊主軸終點
justify-content: center 對齊主軸中間點
justify-content: space-between 對齊主軸左右
justify-content: space-around 對齊主軸左右且每個 item 左右保有相同空間

align-items

容器內部單行側軸(Y軸)對齊

align-items: flex-start 對齊側軸起始點
align-items: flex-end 對齊側軸終點
align-items: center 對齊側軸中間點
align-items: stretch 延展至側軸雙邊、對齊側軸雙邊
align-items: baseline 對齊文字基準線

align-content

容器內部多行對齊

align-content: flex-start 對齊主軸起始點
align-content: flex-end 對齊主軸終點
align-content: center 對齊主軸中間點
align-content: stretch 延展至側軸雙邊、對齊側軸雙邊
align-content: space-between 對齊主軸左右
align-content: space-around 對齊主軸左右且每個 item 左右保有相同空間

Child (item)

order

控制子項目順序，數字越小越接近起始點

order: # (1, 2, 3, ...)

flex-basis

取代 item 之 width，預約空間

flex-basis: auto(default) 不指定 | <width> (100px, 50%, ...) 指定 | content 以內容計算

[注意] flex-shrink屬性 優先 於 width，但若兩者之一值為 auto，則非 auto 之屬性優先 容器若為 nowrap 情況下，子項目建議以 flex-basis 取代 width，若為 wrap 情況，則建議子項目使用 width 即可

flex-grow

主容器剩餘空間索取之擴大比例，default 為 0(代表皆不索取)，代表若主容器寬/高度大於各 item 寬/高度總和時，如何分配於各 item，數字代表索取之份量。

假設容器寬度為500px，且 flex-grow 為預設值 0 時，每個 item 寬度為500/3px； 但若設定三個 item 寬度為100px，再針對其中一個 itemA 設定 flex-grow為1， 則 itemA 之寬度為100px(預設寬度) +200px (總剩餘寬度)。

承上，若再設定 itemB 之 flex-grow 為3， 則 itemB 寬度為100px + 150px(總剩餘寬度200px中的3/4)， 而A之寬度為100px + 50px(總剩餘寬度200px中的1/4)。

flex-grow: 0(default) | #(1, 2, 3, ...)

flex-shrink

主容器剩餘空間吸收之縮小比例，default 為1，代表若主容器寬/高度 不足時，各item吸收比例皆相同，數字代表吸收之份量。

假設容器寬度為700px，預設4個item的寬度皆為200px， 此時主容器寬度不足100px(200px × 4 = 800px)， 預設情況(flex-shrink: 1)下，不足的100px平均由4個item吸收， 因此每個item的寬度為200px - 25px(不足寬度100px的1/4)。

承上，若再指定itemA之flex-shrink為2，則itemA之寬度為200px(預設寬度) - 40px(不足寬度100px的2/5)。

flex-shrink: 1(default) | #(1, 2, 3, ...)

善用 flex-shrink 與 flex-grow 處理跨瀏覽器的寬度計算問題，指定最後一項子項目吸收多餘/不足空間

flex

整合 *flex-grow*、*flex-shrink*、flex-basis 之屬性，依序以空格區隔

flex: 0 1 auto(default) | none 不指定

align-self

針對item之側軸對齊設定，可取代主容器之align-item屬性

align-self: auto 跟從align-item設定
align-self: flex-start 對齊側軸起始邊
align-self: flex-end 對齊側軸終邊
align-self: center 對齊側軸中間
align-self: baseline 以文字為基準
align-self: stretch 延展至側軸雙邊、對齊側軸雙邊

Compatibility

Parant

display: -webkit-box
display: -moz-box
display: -ms-flexbox
display: -webkit-flex
display: flex

Child

-webkit-box-flex: 0 1 auto
-moz-box-flex: 0 1 auto
flex: 0 1 auto

-webkit-box-ordinal-group: 1
-moz-box-ordinal-group: 1
-ms-flex-order: 1
order: 1

Bugs in IE10, IE11

Reference

• Flexbugs
• Normalizing Cross-browser Flexbox Bugs

Bugs

• 子項目設定min-height情況下，容器的高度設定將會被忽略 solution
• 子項目不允許無單位的flex-basis solution
• 子項目圖片自動調整比例問題solution
• flex-basis: auto超出容器大小（包含::before/after）solution
• inline元件無法成為子項目solution

Extra

box-sizing: content-box(default) | border-box | initial | inherit

content-box: element size = width/height + padding + border

border-box: element size = width/height