iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

文組視角的初學前端筆記系列 第 11

Day11 網頁排版好朋友 - Flexbox

Flexbox的組成

Flexbox 是由外容器(flex container)與內元件(flex items)兩部份組成,如下圖

而外容器與內元件分別有不同的屬性,必須了解屬性放的位置是在外容器還是內元件,才能避免放錯位置,產生不出效果的情況發生。

flex container常用屬性有哪些?

  • display:flex;
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap

flex items常用屬性有哪些?

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

flexbox必備屬性display:flex;

特性:

  1. 使內元件並排在flex container內
    例如: 未使用display:flex;前,內元件根據本身區塊元素的特性會換行

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    
    .container{
    background-color: pink;
    width: 500px;
    margin: 0 auto; 
    padding: 10px;
    }
    .item{
    width:100px;
    background-color:skyblue;
    text-align: center;
    font-size: 36px;
    color:royalblue;
    margin:10px;
    }
    

    使用display:flex;後,內元件會並排

    .container{
    display:flex; 
    background-color: pink;
    width: 500px;
    margin: 0 auto; 
    padding: 10px;
    }
    
  2. 內元件會根據外容器的等比例調整寬度
    就算內元件寬度加總超過了外容器寬度,也不會出錯

    .container{
    display:flex; 
    background-color: pink;
    width: 500px;
    margin: 0 auto; 
    padding: 10px;
    }
    .item{
    width:300px;
    background-color:skyblue;
    text-align: center;
    font-size: 36px;
    color:royalblue;
    margin:10px;
    }
    
  3. 預設等高


Flexbox的兩個軸線 (主軸及交錯軸)

1. 主軸(The main axis)

主軸的排列方向是由外容器的flex-direction屬性來定義的,有以下四種的排列方式:

  1. flex-direction: row; (預設) 從左到右排列

  2. flex-direction: row-reverse; 從右到左排列

  3. flex-direction: column; 從上到下排列

  4. flex-direction: column-reverse; 從下到上排列

2. 交錯軸(The cross axis)

不論主軸的方向怎麼更改,交錯軸都會和主軸垂直

參考資料與圖片來源:Basic concepts of flexbox

設定內元件在主軸上的排列方式 justify-content

  • justify-content: flex-start; (預設) 對齊主軸線的起點
  • justify-content: center; 對齊主軸線中間
  • justify-content: flex-end; 對齊主軸線的終點
  • justify-content: space-between;寬度平均分配,第一個和最後一個會貼齊邊緣
  • justify-content: space-around; 寬度和間距平均分配(中間留白較多 左右兩邊留白各占一半空間)
  • justify-content: space-evenly;左右兩邊留白一樣

相關資料:justify-content

設定內元件在交錯軸上的排列方式 align-items& align-content(多行)

  • align-items: flex-start;對齊交錯軸線起點

  • align-items: center;置中對齊交錯軸線

  • align-items: flex-end;對齊交錯軸線終點

  • align-items: stretch; 內元件高度如果沒有設定的狀態下,是預設的屬性

  • align-items: baseline; 基線(文字的底部)

  • align-content: start; 多行對齊交錯軸線起點

  • align-content: center;多行置中對齊交錯軸線

  • align-content: space-between; 寬度會平均分配,第一行和最後一行會貼齊邊緣

  • align-content: space-around; 寬度和間距平均分配(中間留白較多 左右兩邊留白各占一半空間)

相關資料:align-content


flex-wrap 設定換行屬性

因為設定了display:flex;,內元件就會根據外容器的等比例調整寬度,不會依照內元件設定的寬度改變
設定了flex-wrap就可以讓內元件在超出範圍時換行排列,而不會被自動調整寬度擠在同一行

  • flex-wrap: nowrap;(預設) 不換行
  • flex-wrap: wrap; 換行排列
  • flex-wrap:wrap-reverse; 換行時反轉排列方式

flex flow是flex-direction 和 flex-wrap 的簡稱,可以使用flex-flow同時設定flex-direction 和flex-wrap
例如:flex-flow:column wrap;
相關資料:flex flow


flex屬性

flex 是包含三個屬性 flex-grow、flex-shrink 和 flex-basis 的簡稱
參考資料:flex

1. flex-basis

flex-basis: 內元件的基本大小,預設值為 0,可使用不同的單位值。
參考資料:flex-basis

2. flex-shrink

在外容器空間不夠的狀態下,使用flex-shrink依比例縮小以適應有限空間

例如:

 <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>

.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:300px;
	flex-shrink: 3;
	background-color: yellow;
	margin: 10px;
	
  }
  
.box1 {
	width:150px;
	flex-shrink: 1;
	background: blue;
	margin: 10px;
  }

.box2{
	width:200px;
	flex-shrink: 2;
	background-color: seagreen;
	margin: 10px;
}

3. flex-grow

在外容器有多餘空間時,使用flex-grow分配內元件可在主軸上佔外容器的空間比例
未設定時flex-grow,不會將剩餘空間分配給內元件做伸展,分配的比例會依照設定的數值進行配置。
例如:

  <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>
.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:100px;
	flex-grow: 1;
	background-color: yellow;
	margin: 10px;
	
  }
  
.box1 {
	width:150px;
	flex-grow: 2;
	background: blue;
	margin: 10px;
  }

.box2{
	width:120px;
	flex-grow: 3;
	background-color: seagreen;
	margin: 10px;
}

參考資料:詳解flex-grow與flex-shrink 圖解 Flexbox 進階屬性


order改變內元件原有的排列順序

order是用來定義元件的排列順序,順序會依據數值的大小排列。
例如:

  <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>
.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:100px;
	background-color: yellow;
	margin: 10px;
	order:2; 
  }
  
.box1 {
	width:100px;
	background: blue;
	margin: 10px;
	order:3;
  }

.box2{
	width:100px;
	background-color: seagreen;
	margin: 10px;
	order:1;
}

align-self 調整單一內元件交錯軸的排列設定

會覆蓋掉本來 align-items設定的值,可以個別設定單一元件的值
參考資料: align-self

以上為個人學習筆記整理
若有錯誤,歡迎指正


上一篇
Day10 HTML表單元素
下一篇
Day12 經常搞混的CSS Position
系列文
文組視角的初學前端筆記30

尚未有邦友留言

立即登入留言