freeCodeCamp 响应式网页设计的认证课程第六章。通过弹性盒子你可以设计适应不同屏幕大小的网页。在通过创建照片集来学习 CSS 弹性盒子的课程中，使用弹性盒子创建一个响应式的照片集网页。以下为我在学习和实战练习过程中所做的笔记，可供参考。
一、重点 CSS 代码
* selector：
1
2
3
4
5
6
7
8
9
10
11
12
13
| * {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
background: #EBE7E7;
}
.header {
text-align: center;
padding: 32px;
background: #E0DDDD;
}
|
id selector：
1
2
3
4
5
6
7
8
| #gallery img {
width: 25%;
height: 300px;
object-fit: cover;
margin-top: 8px;
padding: 0 4px;
border-radius: 10px;
}
|
CSS Flexbox：
1
2
3
4
5
6
7
8
| #gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0 4px;
}
|
media query：
1
2
3
4
5
6
7
8
9
10
| @media (max-width: 800px) {
#gallery img {
width: 50%;
}
}
@media (max-width: 600px) {
#gallery img {
width: 100%;
}
}
|
二、页面展示