CSS Flexbox 屬性及用法
Flexbox 是什麼？
早期用 Box model 排版的時候，要用很多種方式來避免畫面跑版，但隨著時代進步，不同的裝置有不同的解析度，若每個裝置都要重新設計版面也太麻煩了！於是 Flexbox 就誕生啦！
Flexbox 解決了早期的排版問題，能夠隨著不同裝置來變化排版，可以自適應不同裝置的長寬稱為響應式布局（RWD）。
網路上有很多解釋 Flexbox 的文章，這裡主要說明 Flexbox 相關的屬性及用法。
開始使用
設定
display:flex;
的元素是
flex container
，其子元素為
flex item
。
1 |
<style>
|
屬性介紹
flex container 的相關屬性
flex-direction 方向
row
⚙ 橫的，由左到右的
row-reverse
橫的，由右到左的
column
直的，由上到下的
colume-reverse
直的，由下到上的
flex-wrap 換行
全部item的寬度如果超過 container 的寬度，要不要換行
nowrap
⚙ 不換行
wrap
要換行。當 flex container 的寬度沒辦法容納所有 flex item，就把 flex item 換行
justify-content 水平對齊
flex-start
⚙ 齊頭
flex-end
齊尾
center
置中
space-between
頭尾對齊，item 均分剩餘寬度
space-around
頭尾分一個寬度，item 均分剩餘寬度
space-evenly
item均分剩餘寬度
align-items 垂直對齊
normal
⚙ 基本上跟stretch一樣
flex-start
齊頭
flex-end
齊尾
center
置中
stretch
如果 item 沒有設定 height，就把item 拉伸到跟容器一樣高
flex item 的相關屬性
flex-grow 增長係數
0
⚙ 不影響 width
1
flex item width 占用1倍的剩餘空間，數字越大佔越多
flex-shrink 收縮係數
0
flex item width 不要收縮，會直接爆出去
1
⚙ flex item width 有超出空間，就縮至超出空間的1倍。數字越大，收縮的比例越高
flex-basis 基本寬度
跟 width 很像，但如果有設定 flex-basis 的話，優先度會高於 width
auto
⚙ 內容決定寬度
150px
width 設為 150px。要注意的是，如果
flex-direction: column;
的時候，flex-basis就不是 width 而是 hight 。
flex 縮寫屬性
1 |
/* 順序 grow shrink basis */ |
Flexbox 怎麼設定長寬
設定 flex item 的寬
-
沒有設定 width 會怎樣？
內容會決定寬度。 -
設定了 width 會怎樣？
width 決定寬度最大值
width 會是 flex item 的最大寬度，也就是說寬度可以小於設定的 width ，但不會大於 width
但如果想要固定 width 的話，可以用flex-wrap:wrap;來固定 -
設定 flex-grow 會怎樣?
會依照 flex-grow 去分配 flex item 應該佔多少比例的寬，來填滿剩餘空間。
如果有做 flex-basis 的設定，就等於是做寬度的最小值 -
沒有設定 height 會怎樣?
內容會決定高度。 -
設定了 height 會怎樣?
height 決定固定的高度。 -
flex container
要設定display:flex;跟flex-wrap:wrap; -
flex item
寬的設定 要設定 width ，或是設定 flex-grow, flex-basis
高的設定 要設定 height - flex-grow 分別為 3 跟 1
- flex-basis 皆為 100px
- 先計算剩餘寬度
- 接著把剩餘寬度分配給 box1 及 box2
- 最後分配到的寬度再加回 box 的寬
- flex-shrink 分別為 1 跟 2 跟 3
- width 各為 400
- 先計算超出多少
- 計算三個 box 個別收縮多少
- 把算好的收縮再扣回寬度
設定 flex item 的高
結論
flex-grow 怎麼分配剩餘空間
假設 flex container 的寬為 1000px
並有兩個 flex item，box1 跟 box2
剩餘的寬度 = container width - box 的寬加總
= 1000px - 200px = 800px
分配寬度 = flex container 剩餘寬度 * flex-grow / flex-grow 加總
box1 分配到的寬度 = 800px * 3 / (1+3) = 600px
box2 分配到的寬度 = 800px * 1 / (1+3) = 200px
flex item 寬度 = 分配寬度 + 原寬度
box1 寬度 = 600px + 100px = 700px
box2 寬度 = 200px + 100px = 300px
flex-shrink 怎麼收縮不夠的空間
假設 flex container 的寬為 1000px
並有三個 flex item，box1 跟 box2 跟 box3
超出的寬度 = 三個 box 的寬加總 - flex container 的寬
= 1200px - 1000px = 200px
收縮寬度 = flex container 超出寬度 * flex-shrink / flex-shrink 加總
box1 要收縮的寬度 = 200px * 1 / (1+2+3) = 33.34px
box2 要收縮的寬度 = 200px * 2 / (1+2+3) = 66.66px
box3 要收縮的寬度 = 200px * 3 / (1+2+3) = 100px