課程練習，練習完發現，其實也只有用上 justify-content: space-around 而已，其他就基礎排版囉
index.html
<!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 - Flex 基礎練習</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>
.wrap{
width: 1024px;
margin: 0 auto;
}
.content{
display: flex;
justify-content: space-around;;
}
.item{
width: 300px;
padding: 10px;
border: lightgray 1px solid;
}
.item img{
width: 100%;
}
.item h2{
text-align: center;
font-size: 25px;
}
沒有留言:
張貼留言