一、背景：
最近做一个H5小需求，要求按图中布局，红线框内粉色部分要一致，图片间隔均分，同时适配各个手机，以及list数量不定。
需求.png
二、问题：
拿到这个需求，首先想到的是用flex布局，然后就出现了下图的问题，利用 justify-content: space-between; flex-wrap: wrap; 样式做到了两侧粉色部分留白是保持一致了，图片之间间隔均分也做到了，但是当超出一行排列时，换行后的list直接均分了整条宽度，导致和上行list间隔不一致。
flex均分引发的换行间隔不一致.png
三、解决：
- 首先分析需要考虑的两个潜在要求：一是因为要适配各个手机屏幕，也就是 ul宽度不固定；二是list数量不一致，导致的 每行排列多少个list不固定，即 各个list间隔不固定。
- 接下来，就是思考这两个问题的解决。宽度不固定可以联想到
@media进行响应式布局,因此结合flex布局和@media响应式布局，实现的效果如下：
各个手机屏幕下list的排列.gif
四、代码：
-
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<ul>
<li><div><img src="./images/test.jpg" alt="testImage"><p>test</p></div></li>
<li><div><img src="./images/test.jpg" alt="testImage"><p>test</p></div></li>
<li><div><img src="./images/test.jpg" alt="testImage"><p>test</p></div></li>
<li><div><img src="./images/test.jpg" alt="testImage"><p>test</p></div></li>
<li><div><img src="./images/test.jpg" alt="testImage"><p>test</p></div></li>
<li><div><img src="./images/test.jpg" alt="testImage"><p>test</p></div></li>
</ul>
</div>
</body>
</html>
-
index.css:
* {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.container > ul {
display: flex;
flex-wrap: wrap;
margin: 1rem;
background-color: #f3e9eb;
border-radius: 0.8rem;
}
.container > ul li {
width: 25%;
display: flex;
justify-content: center;
}
@media screen and (max-width: 320px) {
.container ul > li {
width: 33%;
}
}
@media screen and (min-width: 768px) {
.container ul > li {
width: 14%;
}
}
.container > ul li > div {
margin: 0.5rem;
}
自己在做这个需求时， li 是动态渲染进来的，因为数量不一致，这个简单demo就简单粗暴的写了几个，图片可自行修改，此例中仅供参考。
至此， 适配各个手机的flex布局(考虑换行情况)的demo就完成了。
网友评论