close
第一次用 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 就會相當有感的發現:物件都變一樣大了!
文章標籤
全站熱搜