2021-07-05發表2022-06-25更新筆記 / css9 分鐘讀完 (大約1301個字)

CSS Flexbox 屬性及用法

Flexbox 是什麼？

早期用 Box model 排版的時候，要用很多種方式來避免畫面跑版，但隨著時代進步，不同的裝置有不同的解析度，若每個裝置都要重新設計版面也太麻煩了！於是 Flexbox 就誕生啦！

Flexbox 解決了早期的排版問題，能夠隨著不同裝置來變化排版，可以自適應不同裝置的長寬稱為響應式布局（RWD）。

網路上有很多解釋 Flexbox 的文章，這裡主要說明 Flexbox 相關的屬性及用法。

開始使用

設定display:flex;的元素是flex container，其子元素為flex item。

<style>
.container{
  /*  parent set display:flex;  */
  display:flex;
}
</style>

<body>
  <!-- parent is flex container -->
  <div class="container">
    <!-- chird is flex item -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

屬性介紹

下面屬性如果是預設值，會帶有⚙齒輪符號

flex container 的相關屬性

設定在display:flex;同一個元素內的屬性

flex-direction 方向

在畫面上要橫的還是直的

row⚙ 橫的，由左到右的
row-reverse 橫的，由右到左的
column 直的，由上到下的
colume-reverse 直的，由下到上的

flex-wrap 換行

全部item的寬度如果超過 container 的寬度，要不要換行

nowrap⚙ 不換行
wrap 要換行。當 flex container 的寬度沒辦法容納所有 flex item，就把 flex item 換行

justify-content 水平對齊

決定 item 之間的水平對齊方式

flex-start⚙ 齊頭
flex-end 齊尾
center 置中
space-between 頭尾對齊，item 均分剩餘寬度
space-around 頭尾分一個寬度，item 均分剩餘寬度
space-evenly item均分剩餘寬度

align-items 垂直對齊

決定 item 之間的垂直對齊方式

normal⚙ 基本上跟stretch一樣
flex-start 齊頭
flex-end 齊尾
center 置中
stretch 如果 item 沒有設定 height，就把item 拉伸到跟容器一樣高

flex item 的相關屬性

設定在子元素的屬性

flex-grow 增長係數

有剩餘空間的時候怎麼分配

0⚙ 不影響 width
1 flex item width 占用1倍的剩餘空間，數字越大佔越多

flex-grow 怎麼分配剩餘空間

flex-shrink 收縮係數

空間不夠的時候怎麼分配

0 flex item width 不要收縮，會直接爆出去
1⚙ flex item width 有超出空間，就縮至超出空間的1倍。數字越大，收縮的比例越高

flex-shrink 怎麼收縮不夠的空間

flex-basis 基本寬度

跟 width 很像，但如果有設定 flex-basis 的話，優先度會高於 width

auto⚙ 內容決定寬度
150px width 設為 150px。要注意的是，如果flex-direction: column;的時候，flex-basis就不是 width 而是 hight 。

設定 flex item 的寬

flex 縮寫屬性

/* 順序 grow shrink basis */
flex: 0 1 150px;

/* flex:0 1 150px; 等於下列 */
flex-grow:0;
flex-shrink:1;
flex-basis:150px;

Flexbox 怎麼設定長寬

設定 flex item 的寬

沒有設定 width 會怎樣？
內容會決定寬度。
設定了 width 會怎樣？
width 決定寬度最大值
width 會是 flex item 的最大寬度，也就是說寬度可以小於設定的 width ，但不會大於 width
但如果想要固定 width 的話，可以用flex-wrap:wrap;來固定
設定 flex-grow 會怎樣?
會依照 flex-grow 去分配 flex item 應該佔多少比例的寬，來填滿剩餘空間。
如果有做 flex-basis 的設定，就等於是做寬度的最小值

設定 flex item 的高

沒有設定 height 會怎樣?
內容會決定高度。
設定了 height 會怎樣?
height 決定固定的高度。

結論

在使用 flex 做排版的時候：

flex container
要設定display:flex;跟flex-wrap:wrap;
flex item
寬的設定要設定 width ，或是設定 flex-grow, flex-basis
高的設定要設定 height

flex-grow 怎麼分配剩餘空間

假設 flex container 的寬為 1000px
並有兩個 flex item，box1 跟 box2

flex-grow 分別為 3 跟 1
flex-basis 皆為 100px

先計算剩餘寬度

剩餘的寬度 = container width - box 的寬加總
= 1000px - 200px = 800px

接著把剩餘寬度分配給 box1 及 box2

分配寬度 = flex container 剩餘寬度 * flex-grow / flex-grow 加總
box1 分配到的寬度 = 800px * 3 / (1+3) = 600px
box2 分配到的寬度 = 800px * 1 / (1+3) = 200px

最後分配到的寬度再加回 box 的寬

flex item 寬度 = 分配寬度 + 原寬度
box1 寬度 = 600px + 100px = 700px
box2 寬度 = 200px + 100px = 300px

flex-shrink 怎麼收縮不夠的空間

假設 flex container 的寬為 1000px
並有三個 flex item，box1 跟 box2 跟 box3

flex-shrink 分別為 1 跟 2 跟 3
width 各為 400

先計算超出多少

超出的寬度 = 三個 box 的寬加總 - flex container 的寬
= 1200px - 1000px = 200px

計算三個 box 個別收縮多少

收縮寬度 = 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

把算好的收縮再扣回寬度

box1 寬度 = 400 - 33.33 = 366.66px
box2 寬度 = 400 - 66.66 = 333.34px
box3 寬度 = 400 - 100 = 300px

延伸閱讀

A Complete Guide to Flexbox

#css

CSS Flexbox 屬性及用法

Flexbox 是什麼？

開始使用

屬性介紹

flex container 的相關屬性

flex-direction 方向

flex-wrap 換行

justify-content 水平對齊

align-items 垂直對齊

flex item 的相關屬性

flex-grow 增長係數

flex-shrink 收縮係數

flex-basis 基本寬度

flex 縮寫屬性

Flexbox 怎麼設定長寬

設定 flex item 的寬

設定 flex item 的高

結論

flex-grow 怎麼分配剩餘空間

flex-shrink 怎麼收縮不夠的空間

延伸閱讀

最新文章

彙整

標籤