延續
[CSS] Flex 基礎練習 練習內容，該筆記要記錄三欄顯示會隨著瀏覽器縮小而變成兩欄、一欄，模擬在不同行動裝置上的 UI 顯示，會用上重點為
- box-sizing：預設為 content-box，設定為 border-box 方便計算和應用
- max-width：以父元素 (上一層) 寬度為判斷目標
- 當父元素寬度高於設定值 (比較寬) 時：保持該寬度
- 當父元素寬度低於設定值 (比較窄) 時：隨父元素寬度自動調整
- flex-wrap：預設為 no-wrap，會設定 wrap，隨著瀏覽器縮小而折行
- Media Query：判斷瀏覽器大小
- 大螢幕：三欄 (約 1024px 以上)
- 中螢幕：兩欄 (約 768px 到 992px 之間)
- 小螢幕：一欄 (約 767px 以下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>[CSS] 三欄流體式設計</title>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="item">
<img src="https://82534363_4f518a102e_n.jpg" alt="高雄愛河">
<h2>高雄愛河</h2>
<p>高雄愛河是穿梭都市的生命之水，兩岸綠樹成蔭，微風徐徐。夜間尤其迷人，河畔燈光倒映水面，波光粼粼，如同一條璀璨的銀帶。遊客可漫步親水步道，或搭乘愛之船，感受迎面而來的浪漫氣息。週末更有市集和街頭藝人，為這片靜謐的河景增添熱鬧與活力，是高雄最具代表性的休憩與觀光勝地。</p>
</div>
<div class="item">
<img src="https://1776884718_0ed0417709_n.jpg" alt="溫哥華市中心">
<h2>溫哥華市中心</h2>
<p>溫哥華市中心坐擁壯麗的海灣景色，現代化的玻璃帷幕高樓直插雲霄，與湛藍的英吉利灣和布拉德內灣形成鮮明對比。街道充滿活力，從時尚的羅布森街到歷史悠久的蓋士鎮，處處可見繁忙的購物人潮、多元的餐飲文化。市區緊鄰史丹利公園，讓這座都會在繁華之餘，仍保有親近大自然的綠色魅力。</p>
</div>
<div class="item">
<img src="https://125408140_c9204a223e_n.jpg" alt="台北大直橋">
<h2>台北大直橋</h2>
<p>台北大直橋是橫跨基隆河的一座醒目地標，以其獨特的白色拱形鋼纜設計而聞名，流線型的橋身優雅地劃過水面，極具現代感。夜幕降臨後，橋體會亮起多變的燈光秀，與周圍的內湖科技園區和美麗華摩天輪夜景相互輝映，是攝影愛好者的熱點。它不僅是重要的交通樞紐，更是一座融合工程與藝術的城市景觀橋。</p>
</div>
</div>
</div>
</body>
</html>
style.css
*{
box-sizing: border-box; /* 讓 padding 和 border 包含在 width 內 */
}
.wrap{
max-width: 1024px;
margin: 0 auto;
}
.content{
display: flex;
justify-content: center;
gap: 10px; /* item 之間的間距 */
flex-wrap: wrap; /* 允許折行 */
}
.item{
width: 30%;
padding: 10px;
border: lightgray 1px solid;
}
.item img{
width: 100%;
}
.item h2{
text-align: center;
font-size: 25px;
}
/* 中螢幕 */
@media (max-width:992px) {
.item{
width: 48%;
margin-bottom: 10px;
}
}
/* 小螢幕 */
@media (max-width:767px) {
.item{
width: 80%
}
}
效果呈現
沒有留言:
張貼留言