在工作中遇到个一个问题,使用flex布局对于动态渲染的元素,当要在固定区域内进行多排显示的时候,如果最后一排元素个数不够,在使用justify-content: space-around
属性来做自适应时最后一排元素因为剩余大小多,间隔显得很大,如何将这一排的元素从左到右排列,我整理了以下方法。
处理之前
处理之后
测试代码
<div class="main">
<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>
.main {
width: 600px;
height: 400px;
margin: 0 auto;
border: 1px solid red;
display: flex;
justify-content: space-around;
align-content: space-around;
flex-wrap: wrap;
}
.main .item {
width: 20%;
height: 36%;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
1、使用gird布局
思路:网格布局能够使元素按从左到右排列
display: grid;
grid-template-columns: repeat(4,25%); /* 网格数量 */
grid-template-rows: repeat(2,50%); /* 网格数量 */
grid-gap: 5px 5px; /* 网格间距 */
justify-items: center; /* 单元格对齐方式 */
align-items: center; /* 单元格对齐方式 */
只用网格布局后,子元素的宽高百分比是单元格的百分比。
2、最flex布局中最后一个元素设置margin-right
值
思路:只需要选中最后一个元素,计算出对应的margin-right
的值
.main .item:last-of-type {
margin-right: 25%;
}
需要计算间隔所占的大小,如果外面的大盒子是自适应的话,这种方式不太好。
3、添加元素隐藏占位
思路:差几个元素就补几个元素,然后设置隐藏。
.main .item:last-of-type {
/* opacity: 0; */
visibility: hidden;
}
使用在设计好的一排和一共有多少个元素的时候使用。
参考文章:网格布局