CSS列表项布局知识：使用多个属性避免使用Javascript控制

在开发过程中，我们经常会遇到列表显示问题，例如：

• 图像选择器列表

• 人员职级选择列表

• 工作条件列表

通用方法

为了更方便、美观，我们通常在每个列表，将它们分开，然后将它们折叠起来，当一行超过容器的长度时

这是在不同情况下处理列表元素下方的margin-right 和♶ 和♶，让列表空格和换行更加自然美观是本文的重点

不同位置的布局

元素的宽度已知，即每个元素的最大行数已知，并且每个元素都在一个 Container 中

1. 思路：在一个容器中，去掉每三个元素的右边距，并删除最后三个元素的下边距（如果最后一行小于 3 则不影响）
2. 按键代码

<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>
复制代码

1. 运行截图

4。完整代码：元素宽度已知，所有元素都在一个容器中

元素宽度已知或未知，元素在与最后一个容器的行数对应的容器中 - 底部，最后一个元素去掉magin的代码-右键键

<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>
复制代码

1. 运行屏幕截图

1. 完整代码：元素宽度已知或未知，并根据行数放置在适当的容器中，采用常见的弹性排列

1。方法：Flex布局

1. 想法：在flex布局中使用对齐-内容主轴属性来控制元素的间距
2. 缺点：flex虽然强大，但是在面对变长列表元素的布局时，不能满足要求
3. 按键代码

<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;
  }
}
复制代码

1. 运行截图R

1. 完整代码：元素的宽度已知或未知，根据行数将其放置在适当的容器中

2.方法：Negative Margin

1. 下面是负margin方法，有效解决了变长列表项的布局问题
2. 想法：在最外层使用wrapper封装，容器设置负margin来抵消item Margin

参考链接：segmentfault.com/q/101000000 …

1. 关键代码

<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>
复制代码

1. 运行截图

1. 完整代码： 方法二：元素宽度未知，所有元素都在一个容器中。对列表进行排序，不要使用js控制列表项并访问css和js分离更有利于项目维护

   作者：创宇前端
   来源：掘金