前言:
最近在公司中完成小程序的UI设计稿时,遇到了布局一个问题:UI设计稿想实现的布局是这样的:
笔者第一反应就是使用flex中的justify-content: space-between;属性,但是使用之后发现,justify-content: space-between;这个属性会以行为单位进行布局,就变成了这种布局:
经过笔者的研究,最后发现使用flex布局加百分比布局就可以自由排放每一行的盒子,整理代码如下:
HTML代码:
<body><div class="container"><div class="content"><imgsrc="你的图片地址"alt=""/><span>title1</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title2</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title3</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title4</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title5</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title6</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title7</span></div></div></body>
CSS代码:
.container {width: 100%;padding: 20px 0px;height: 392rpx;/* 使用flex布局并允许换行 */display: flex;flex-wrap: wrap;background: #f2f8da;
}
.content {/* 给单个盒子设宽度,使用百分比,25%就是一行最多放4个盒子 */width: 25%;height: 50px;margin-bottom: 48px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 24rpx;font-weight: normal;line-height: 24rpx;color: #323640;
}
img {width: 30px;height: 30px;margin-bottom: 6px;
}