移动端布局
2018-11-28 本文已影响2人
雅玲哑铃
image.png
今天讲讲移动端常见的这种布局，描述一下：
每行显示三个元素，每个元素之间的间距固定，元素的宽度根据屏幕大小自适应
下面简单代码展示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<style>
html, body{
margin: 0;
padding: 0;
}
.box{
padding: 10px 30px;
}
ul{
width: calc(100% + 30px);
padding: 0;
display: flex;
flex-wrap: wrap;
}
li{
line-height: 100px;
list-style: none;
background-color: skyblue;
flex: 0 0 calc(33.33% - 30px);
margin-right: 30px;
margin-bottom: 30px;
}
</style>
<body>
<div class="box">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>
效果图
image.png
如果是简单的这种布局可以采用上方这种写法布局，但是，比如我们遇到下面这种页面，改怎么做，上面的这种方法还是适用吗？
image.png
感兴趣的童鞋我们可以交流一下方案哦～
期待大家参与，我们一起做出更多的方案～
