10.1 自適應欄位
Flexbox 是為一維佈局設計的，也就是說，它非常適合排列元素在一行或一列中。來看看 Flexbox 的基礎知識，以及用來創造複雜和響應式佈局的技巧。
Flex 容器和 Flex 元素
-
Flex 容器：應用
display: flex屬性的元素。此容器管理所有子元素（flex 元素）的佈局. - Flex 元素：flex 容器的子元素。
1. 創建自適應欄位
使用 flex-wrap, flex-grow, flex-shrink 和 flex-basis 創建自適應欄位的範例：
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 200px;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 Flexbox 的自適應欄位</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">欄位 1</div>
<div class="flex-item">欄位 2</div>
<div class="flex-item">欄位 3</div>
</div>
</body>
</html>
代碼說明：
-
.flex-container：用來定義容器為 flex 容器，子元素不足空間時可以換行 (flex-wrap: wrap) -
.flex-item：元素具有相等尺寸並可以適應可用空間 (flex: 1 1 200px)
10.2 自適應圖片畫廊
我們來創建一個自適應圖片畫廊，該畫廊會根據屏幕大小改變欄位數量：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img data-max-width="256" data-id="ebb06cf3-0e04-45bd-a33e-31fe096fd323" src="https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="image 1">
<img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.javarush.com/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="image 2">
<img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.javarush.com/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="image 3">
<img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.javarush.com/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="image 4">
<img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.javarush.com/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="image 5">
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
</body>
</html>
解釋：
- 在大螢幕上，圖片佔容器寬度的三分之一
- 寬度達 768 像素的螢幕上，圖片佔容器寬度的一半
- 寬度達 480 像素的螢幕上，圖片佔據了容器的全部寬度
10.3 使用 Flexbox 創建複雜但自適應的佈局
我們來使用 Flexbox 創建一個複雜的佈局，其中包括頁眉、側邊欄、主要內容和頁尾，這些元素會隨著螢幕尺寸的不同而進行調整：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Flexbox Layout</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
aside {
background-color: #ccc;
padding: 20px;
}
@media (min-width: 768px) {
main {
flex-direction: row;
}
.content {
flex: 3;
}
aside {
flex: 1;
}
}
</style>
</head>
<body>
<header>頁眉</header>
<main>
<aside>側邊欄</aside>
<div class="content">主要內容</div>
</main>
<footer>頁尾</footer>
</body>
</html>
說明：
- 在小螢幕上，佈局由垂直排列的頁眉、主要內容、側邊欄和頁尾組成
- 在寬度達 768 像素的螢幕上，主要內容和側邊欄會水平排列
GO TO FULL VERSION