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

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