第一次用 CSS 的 flex 排版時，覺得超級驚豔！可以輕鬆的將一系列物件調整至等高、置中對齊、基線對齊等，要把東西拉成一列或排成一欄也只要透過 "flex-direction" 一個 CSS 屬性，就能調整。就連分散對齊都是一秒設定！
所以收集一下覺得很不錯的教學文：
- 《2021 iThome 鐵人賽 Day 5 : HTML - 網頁排版超強神器，CSS Flex到底是什麼？》
這篇以圖解的方式說明 flex 的基本概念，最重要的就是：flex 要設定在外容器！
（相當於繪圖軟體在「畫布」上去對齊物件的概念） - mdn web docs__ References > CSS > align-items
文章裡有可以互動的案例，可以直接操作，感受各屬性設定帶來的版面變化。
像是 "Result" 這段裡的物件有大有小，設定了 align-items: stretch 就會相當有感的發現：物件都變一樣大了！
文章標籤
全站熱搜
文書處理 (5)