CSS 列表项布局技巧:多用属性避免使用 javascript控制

2018-12-1720:29:41网页制作Comments2,434 views字数 2321阅读模式

开发中我们经常会遇到关于如何展示列表的问题，例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8701.html

图片选择器列表

人员部门选择列表

工作状态列表

通用方法

为了让其看起来更加舒适美观，通常我们会在每个列表项上添加 margin-right 和 margin-bottom 属性来隔开它们，然后一行超过容器长度后进行换行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8701.html

那么在各种情况下，如何处理列表项中margin-right和margin-bottom，让列表间隔和换行看起来更加自然美观是本篇的重点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8701.html

各种情况下的布局

元素宽度已知，即知道每行最多多少个，且所有元素都在一个容器中

思路：item 在一个容器中，每第三个去掉 margin-right，最后三个取消 margin-bottom（如最后一行不满 3 个也不影响）
关键代码

<div class='container'>
  <div class='item'>宽度已知，最多放三个</div>
  <div class='item'>宽度已知，最多放三个</div>
  <div class='item'>宽度已知，最多放三个</div>
  ...
</div>

<style>
/* scss code */
.container {
  .item {
    margin-right: 30px;
    margin-bottom: 20px;

    &:nth-child(3n) { margin-right: 0; }
    &:nth-last-child(-n+3) { margin-bottom: 0; }
  }
}
</style>
复制代码

运行截图

4. 完整代码：元素宽度已知，所有元素都在一个容器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8701.html

元素宽度已知或未知，且元素按照行数在相应容器中

思路：最后一个 container 去掉 margin-bottom，最后一个 item 去掉 magin-right
关键代码

<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
</div>
<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>
<div class='container'>
  <div class='item'></div>
</div>

<style>
/* scss code */
.container {
  margin-bottom: 20px;
  &:last-child { margin-bottom: 0; }

  .item {
    margin-right: 30px;
    &:last-child { margin-right: 0; }
  }
}
</style>
复制代码

运行截图

完整代码：元素宽度已知或未知，且按照行数在相应容器

元素宽度未知，即不知道一行最多多少个，且所有元素都在一个容器中，常见于 flex 布局

法1：Flex 布局

思路：利用 flex 布局的 justify-content 主轴属性来控制元素的间距
缺点：flex 虽然强大，但是面对长度不定的列表项布局还是不能很好满足要求
关键代码

<div class='container'>
  <div class='item'>两个可以成一行</div>
  <div class='item'>两个可以成一行</div>
  <div class='item'>这三个字</div>
  <div class='item'>独成一行呀独成一行呀独成一行呀独成</div>
  <div class='item'>两个才能成一行呀</div>
  <div class='item'>四个</div>
</div>

<style>
/* scss code */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 可以尝试其他值，但效果仍不好 */

  .item {
    /* margin-right: 30px; 可以不用 m-r，由 flex 来控制左右间距 */
    margin-bottom: 20px;
  }
}
复制代码

运行截图

完整代码：元素宽度已知或未知，且按照行数在相应容器

法2：负margin

接下来介绍负margin 方法，可以很好的解决长度不定的列表项布局问题
思路：用一个 wrapper 包在最外层，container 设置负的 margin 来抵消 item 的外边距

参考链接：segmentfault.com/q/101000000…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8701.html

关键代码

<div class="wrapper">
  <div class='container'>
    <div class='item'>两个才能成一行呀</div>
    <div class='item'>两个才能成一行呀</div>
    <div class='item'>这三个字</div>
    <div class='item'>独成一行呀独成一行呀独成一行呀独</div>
    <div class='item'>两个才能成一行呀</div>
    <div class='item'>四个</div>
  </div>
</div>

<style>
/* scss code */
.wrapper {
  padding: 10px;
  border: 2px solid rgb(240, 103, 103);

  .container {
    display: flex;
    flex-wrap: wrap;
    margin-right: -30px;
    margin-bottom: -20px;

    .item {
      margin-right: 30px;
      margin-bottom: 20px;
    }
  }
}
</style>
复制代码