关于技术您现在的位置是：首页 > 关于技术
卡片列表自适应居中布局
2021-05-08 11:33:14
【CSS3】
430 人已围观
0 条评论
简介
flex布局: 解决 justify-content: center；最后一行元素靠左对齐
碰到一个需求，类似这张图，每一张卡片的宽高和间距都是固定的，每一行展示的卡片数量是随屏幕大小自适应的，而卡片整体区域又是居中的；
【缩小/增大浏览器窗口大小，每一行展示的卡片数量会随之减少（掉落到下一行）/增加（提升到上一行），但卡片整体区域水平居中】
记录一下，就暂且用flex布局实现一下：
结构
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul>
样式
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul li {
width: 200px;
height: 300px;
margin: 10px;
text-align: center;
line-height: 300px;
background: #fff;
box-shadow: 0 0 2px 2px #f1f1f1;
}
结果
我们发现最后一行卡片不够时，会居中显示，这不是我们想要的，我们希望卡片都是左对齐的；
解决方法：放置占位元素，占位元素宽度与其它元素保持一致，高度设置为0；
如果占位元素不够，可以多设置几个，不影响结构；
结构
<!-- 占位元素 --> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li> <li class="temp"></li>
样式
/* 占位元素样式 */
ul li.temp {
height: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
结果
看起来还不错，就是放置了空标签，看起来很难受，影响不大；查看示例
上一篇: js连续赋值及引用类型指针问题（a.x=a={n:2}）
下一篇: git提交如何忽略某些文件
