案例
多行可伸缩布局
需求：
每一行 flex item数量为6个
item的宽度具备响应式。跟随窗口变化而变化
flex item之间存在间隙16px
版心需要对齐
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 关键：padding属于width */
box-sizing: border-box;
}
.w {
width: 80%;
margin: 0 auto;
}
.container {
display: flex;
margin-left: -8px;
margin-right: -8px;
flex-wrap: wrap;
}
.item {
height: 200px;
flex: 0 0 16.666667%;
padding: 0 8px;
margin-bottom: 16px;
}
.box {
height: 100%;
background-color: pink;
}
.footer {
width: 80%;
height: 100px;
margin: 0 auto;
background-color: #333;
}
</style>
</head>
<body>
<div class="w">
<div class="container">
<div class="item">
<div class="box">1</div>
</div>
<div class="item">
<div class="box">2</div>
</div>
<div class="item">
<div class="box">3</div>
</div>
<div class="item">
<div class="box">4</div>
</div>
<div class="item">
<div class="box">5</div>
</div>
<div class="item">
<div class="box">6</div>
</div>
<div class="item">
<div class="box">7</div>
</div>
<div class="item">
<div class="box">8</div>
</div>
<div class="item">
<div class="box">9</div>
</div>
</div>
</div>
<div class="footer"></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>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 关键：padding属于width */
box-sizing: border-box;
}
.w {
width: 80%;
margin: 0 auto;
}
.container {
display: flex;
margin-left: -8px;
margin-right: -8px;
flex-wrap: wrap;
}
.item {
height: 200px;
flex: 1;
min-width: calc(16.666667% - 16px);
max-width: calc(16.666667% - 16px);
margin: 0 8px 16px;
background-color: pink;
}
.footer {
width: 80%;
height: 100px;
margin: 0 auto;
background-color: #333;
}
</style>
</head>
<body>
<div class="w">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
<div class="footer"></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>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: gray;
}
.main {
display: flex;
width: 80%;
margin: 20px auto;
gap: 20px;
}
.item {
flex: 1;
}
.item a {
display: block;
border-radius: 16px;
overflow: hidden;
margin-bottom: 20px;
}
.item img {
/* 解决图片底部空白问题 */
vertical-align: top;
width: 100%;
}
</style>
<body>
<div class="main">
<!-- 1 -->
<div class="item">
<a href="#"><img src="./img/1.jpeg" alt="" /></a>
<a href="#"><img src="./img/2.jpeg" alt="" /></a>
<a href="#"><img src="./img/3.jpeg" alt="" /></a>
</div>
<!-- 2 -->
<div class="item">
<a href="#"><img src="./img/2.jpeg" alt="" /></a>
<a href="#"><img src="./img/3.jpeg" alt="" /></a>
<a href="#"><img src="./img/1.jpeg" alt="" /></a>
</div>
<!-- 3 -->
<div class="item">
<a href="#"><img src="./img/1.jpeg" alt="" /></a>
<a href="#"><img src="./img/2.jpeg" alt="" /></a>
<a href="#"><img src="./img/3.jpeg" alt="" /></a>
</div>
<!-- 4 -->
<div class="item">
<a href="#"><img src="./img/2.jpeg" alt="" /></a>
<a href="#"><img src="./img/3.jpeg" alt="" /></a>
<a href="#"><img src="./img/1.jpeg" alt="" /></a>
</div>
</div>
</body>
</html>