卡片列表自适应居中布局

关于技术您现在的位置是:首页 > 关于技术

卡片列表自适应居中布局

头像 2021-05-08 11:33:14 260 人已围观 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;
}

结果

看起来还不错,就是放置了空标签,看起来很难受,影响不大;查看示例

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号