Open in app

Sign in

Write

Sign in

CSS # 4— 網頁排版聖器(Flex box)-下

Thomas Hung
Thomas 學習筆記
Published in
13 min readJun 8, 2020
Photo by Christian Fregnan on Unsplash

那我們繼續之前未完成的 Flex box 。

flex-wrap

此屬性指的是在 Flex box 容器中的子元素是否換行，預設值為單行方式撐開 Flex box 容器的父層元素且不會換行，其屬性值可分為以下三種 :

  • nowrap

預設值，不換行。

//**HTML**
<div class="flexbox">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
  <div class="item item5">item5</div>
</div>//**CSS**
.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: nowrap;  //預設值，不換行。
}
.item {
  width: 100px;
  height:100px;
  border: 1px solid black;
  text-align: center;
  font-size: 20px;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: yellow;
}
.item3 {
  background-color: green;
}
.item4 {
  background-color: pink;
}
.item5 {
  background-color: blue;
}
  • wrap

此屬性值為換行。

.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap;  //換行
}
  • wrap-reverse

此屬性值為換行且反轉。

.flexbox {
  display: flex;
  padding: 10px;
  width: 500px;
  height: 500px;
  background-color: gray;
  flex-wrap: wrap-reverse;  //換行且反轉
}

子層元素 (Flex item) 的屬性

在Flex box 容器中的子元素(Flex item)可以經由以下幾種屬性單獨改變子元素的呈現方式。

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis

order

此屬性為設定子元素中的順序排列，數值是由小至大，意思是如數線一樣，數值越大越右邊，反之越小越左邊。

預設值 ：default

order : 1

.item2 {
  background-color: yellow;
  order:1;
}

order : 2 與 order: 4

.item2 {
  background-color: yellow;
  order:2;
}
.item4 {
  background-color: pink;
  order:4;
}

align-self

此屬性與 align-items 類似，差異在只針對單個子元素做改變並不是整個子元素。

  • flex-start : 此屬性值會對單個子元素做對齊垂直方向的交錯軸起點 (cross start)：預設貼齊位置點，最上方。
.item3 {
  background-color: green;
  align-items:flex-start; //預設貼齊位置點，最上方。
}
  • center : 此屬性值會對單個子元素做垂直置中對齊。
.item3 {
  background-color: green;
  align-self:center;  //垂直置中對齊
}
  • flex-end : 此屬性值會對容器內的單個子元素做垂直方向對齊於交錯軸終點 (cross end)。
.item3 {
  background-color: green;
  align-self:flex-end;  //對齊於交錯軸終點(cross end)
}

flex-grow

此屬性為分配剩餘空間或是在容器中佔多少部份，預設值為 0 。

公式 : ( 父層容器剩餘空間 width/height * 幾等份 )+ 子元素 width/height

//**HTML**
<div class="flexbox">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
</div>//**CSS**
.flexbox {
  display: flex;  
  width: 500px;
}
.item {
  width: 100px;
  height: 100px;
  border: 1px solid black; //增加邊框為了讓區塊更明顯
  text-align: center;
  font-size: 20px;
  flex-grow: 1;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: yellow;
  flex-grow: 2;
}
.item3 {
  background-color: green;
}

如同上述的，父層容器寛度為 500px 與子元素每個寛度為 100px，其中只有 .item2 的 flex-grow 屬性值為 2，那使用以下的方式來說明上述的公式 :

//幾等份 
item1 = flex-grow : 1(分子)
item2 = flex-grow : 2(分子)
item3 = flex-grow : 1(分子)
所以 1 + 2 + 1 = 4(分母)// 父層容器剩餘空間 200px * flex-grow 1/4等份 + item1 的寛度 100px
200px * 1/4 + 100px = 150px// 父層容器剩餘空間 200px * flex-grow 2/4等份 + item2 的寛度 100px
200px * 2/4 + 100px = 200px// 父層容器剩餘空間 200px * flex-grow 1/4等份 + item3 的寛度 100px
200px * 1/4 + 100px = 150px

例外，如果flex-grow 屬性值小於 1 時，父層容器會有剩餘空間。

.item {
  width: 100px;
  height: 100px;
  border: 1px solid black; //增加邊框為了讓區塊更明顯
  text-align: center;
  font-size: 20px;
}
.item1 {
  background-color: red;
  flex-grow: .1;
}
.item2 {
  background-color: yellow;
  flex-grow: .2;
}
.item3 {
  background-color: green;
  flex-grow: .1;
}

就如上述所說的當 flex-grow 屬性值小於 1 時，等份的分母都使用 1 來計算。

//幾等份 
item1 = flex-grow : .1(分子)
item2 = flex-grow : .2(分子)
item3 = flex-grow : .1(分子)
所以為 1 (分母)// 父層容器剩餘空間 200px * flex-grow 0.1等份 + item1 的寛度 100px
200px * 0.1/1 + 100px = 120px// 父層容器剩餘空間 200px * flex-grow 0.2等份 + item2 的寛度 100px
200px * 0.2/1 + 100px = 140px// 父層容器剩餘空間 200px * flex-grow 0.1等份 + item3 的寛度 100px
200px * 0.1/1 + 100px = 120px

注意 flex-grow 屬性值沒有負值。

flex-shrink

此屬性與 flex-grow 正好相反，當空間有限時如何分配縮小子元素的空間，預設值為 1。

在這裡需注意如果將預設值改為 0 時，子元素會超出父層容器。

公式 : 子元素 width/height -( 超出父層容器的空間 width/height * 幾等份 * 子元素 width/height）/ 父層總共所需的空間

.flexbox {
  display: flex;  
  width: 500px;  
}
.item {
  width: 200px;
  height: 100px;
  border: 1px solid black;  //增加邊框為了讓區塊更明顯
  text-align: center;
  font-size: 20px;
}
.item1 {
  background-color: red;
  flex-shrink: 1;
}
.item2 {
  background-color: yellow;
  flex-shrink: 2;
}
.item3 {
  background-color: green;
  flex-shrink: 3;
}

如同上述的，父層容器寛度為 500px 與子元素每個寛度為 200px，那使用以下的方式來說明上述的公式 :

//超出父層容器的空間 width/height，item1~item3 (width/height)
200px + 200px + 200px = 600px - 500px(父層容器的空間)
所以為 -100px //父層總共所需的空間 itemN * flex-shrink 並總加
1 * 200px + 2 * 200px + 3 * 200px = 1200px//幾等份 
item1 = flex-shrink: 1
item2 = flex-shrink: 2
item3 = flex-shrink: 3// item1子元素 width/height 200px -( 超出父層容器的空間 width/height 100px * 幾等份 item1 flex-shrink * item1子元素 width/height）/ 父層總共所需的空間 1200px
200px - (100px * 1 * 200px) / 1200px = 183px// item2子元素 width/height 200px -( 超出父層容器的空間 width/height 100px * 幾等份 item1 flex-shrink * item2子元素 width/height）/ 父層總共所需的空間 1200px
200px - (100px * 2 * 200px) / 1200px = 166px// item3子元素 width/height 200px -( 超出父層容器的空間 width/height 100px * 幾等份 item1 flex-shrink * item3子元素 width/height）/ 父層總共所需的空間 1200px
200px - (100px * 3 * 200px) / 1200px = 150px

flex-basis

能重新設定 Flex box 容器中的子元素(Flex item)的 寛(width)/高(height)，預設值爲 auto，此屬性優先程度高 子元素的寛(width)/高(height)。

flex-basis 與 width/height 異差 ：

  • 當 flex-direction: row 時，flex-basis 會更改 子元素(Flex item)的 寛度(width)。
.flexbox {
  display: flex;  
  width: 500px;
  height: 500px;  
}
.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;  //增加邊框為了讓區塊更明顯
  text-align: center;
  font-size: 20px;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: yellow;
  flex-basis: 150px;
}
.item3 {
  background-color: green;
}
.item4 {
  background-color: pink;
  flex-basis: 50px;
}
.item5 {
  background-color: blue;
}
  • 當 flex-direction: column 時，flex-basis 會更改 子元素(Flex item)的 高度(height)。
.flexbox {
  display: flex;
  width: 100px;
  height: 500px;
  flex-direction:column; 
}
.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;  //增加邊框為了讓區塊更明顯
  text-align: center;
  font-size: 20px;
}
.item1 {
  background-color: red;
}
.item2 {
  background-color: yellow;
  flex-basis: 50px;
}
.item3 {
  background-color: green;
}
.item4 {
  background-color: pink;
  flex-basis: 200px;
}
.item5 {
  background-color: blue;
}

最後可以使用 flex 屬性簡寫以上三個屬性，順序爲 flex-grow | flex-shrink | flex-basis 。

…

參考： Flexbox 、 flex-grow 與 flex-shrink

以上是我對 CSS # 4 — 網頁排版聖器(Flex box)-下 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~

***也謝謝你(妳)的閱讀，覺得有幫助的話別忘了順手拍個手喔！***

CSS
Css3
Flex
Flexbox
學習

--

--

Thomas Hung
Thomas 學習筆記

Written by Thomas Hung

20 Followers
Editor for

when you feel like quitting,think about why you started.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams