关于技术您现在的位置是:首页 > 关于技术
卡片列表自适应居中布局
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提交如何忽略某些文件