---
# System prepended metadata

title: flex-container/清空瀏覽器預設數值/小圖案連結font-awesome/主軸and次軸flex-container
tags: [HTML]

---

###### tags: `HTML`

# flex-container/清空瀏覽器預設數值/小圖案連結font-awesome/主軸and次軸flex-container

- 22/4/20~21

# flex-container (藍色)
1. flex-direction row/column
2. flex-wrap 換行
   flex-flow 
3. 灰色對齊藍色方式 justify-content
  align-items
  align-content

- flex
  先看主軸 是 row 或 column

1. 我要做個藍色flexbox

5. 主軸方向選擇
  橫 flex-direction: row; 
  直 flex-direction: column; 
  
3. 三個灰色的小盒子
  擁有flex-direction母選單底下的子選單,會依照母選單設定的主軸排列
  
5. 換行
  關於物件往下排, 一般預設為不可換行
  不換行  flex-wrap: nowrap;
  換行  flex-wrap: wrap;

6. 灰色寬 100% / 3
 
<pre>
<flexbox>
  方向是row <---css
  <灰色1>
  <灰色2>
  <灰色3>
</flexbox>
</pre>

- display 應注意事項:
1. display : flex 宣告使用flexbox
2. display : flex 預設主軸橫的row
3. display : inline-block 因會產生空格,不適用於網頁排版
4. display : flex 可以解決排版問題





# 清空 瀏覽器預設數值 normalize.css
  一般各個瀏覽器會有各自的默認設定,為避免因不同瀏覽器產生的畫面排版錯誤
  通常建議先清空默認設定在開始編寫
1. 先清空
2. jquery css 
3. 寫自己的 css






# 小圖案連結 font-awesome 
1. 先到cdn.js網站 https://cdnjs.com/
   搜尋font-awesome 目前最新為6.1.1 
   選擇適用版本的awesome並copy link tag
   
2. 在head內建立link放上copy link tag
<pre>
<head>
   <link> copy link tag </link>
  </head> 
</pre>

3. 到font-awesome網站 https://fontawesome.com/ 選擇圖片
    >icons > All New Thin Icons > Solid or Regular > Free
    >選擇圖片分類 > 選擇圖片 > 點擊 程式碼以copy >
    
4. 將 copy 的程式碼 放進body
    <pre>
    <body>
    < i class="fa-solid fa-bus"></i>
    </body>
    </pre>

- 一般常用 editing / files





# 2022-04-21
# 主軸/次軸 flex-container
justify-content: center 對齊主軸
align-items: center 對其次軸 (stretch 延伸)
align-content: space-between 多組次軸對齊

- 藍色容器
 flex
 flex-direction 設定主軸
 flex-wrap 換行
 justify-content 全部對齊方式

- 灰色物件
 div
 flex-basis 主軸基準長度