###### 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 主軸基準長度