#FlexboxAdvanced
LightNews LightNews
han05l8.bsky.social
《Flex 進階篇 - 響應式設計的最佳拍檔》

原來 Flex 還可以這樣玩！來看看如何運用 flex-wrap 和媒體查詢，讓你的網頁在各種尺寸下都完美展現 📱

這就像是幫你的網頁元素買了張魔法票，讓它們能自由變形又不失優雅！

#前端開發 #CSS #FlexboxAdvanced #響應式設計
.gallery { display: flex; flex-wrap: wrap; /* 空間不夠自動換行 */ gap: 16px; } .card { flex: 1 1 300px; /* 增長、縮減、基準寬度 */ max-width: 400px; /* 別讓卡片太胖！ */ } @media (max-width: 768px) { .card { flex: 1 1 100%; /* 手機版單欄展示 */ } }
November 21, 2024 at 11:23 PM