html - 结合 flex-start 和 space-between 的外观

<分区>

我有一个要用 CSS 显示的元素列表。最初，它只有两个元素并排在一行上，但现在我想让它响应更大的屏幕，所以我想让它在一行上显示 3 个元素。我的旧代码看起来像这样，带有 justify-content:space-between。显示奇数个元素看起来不错。

.flex-container-old{
  margin-top: 50px;
  background: magenta;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box-old{
  width: 40%;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 300px;
  background: orange;
}

.wrapper{
  margin: 0 auto;
  width: 80%;
}

body{
background:#D3D3D3;
}

<div class="wrapper">
      <div class="flex-container-old">
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
          <div class="box-old">
          </div>
      </div>
  </div>

所以很自然地，我通过修改 width 属性将其扩展为一行中的三个元素，结果如下所示。

.flex-container-new{
  background: lightblue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  width: 30%;
  border: 1px solid black;
  margin-bottom: 20px;
  height: 300px;
  background: orange;
}

.wrapper{
  margin: 0 auto;
  width: 80%;
}

<div class="wrapper">
    <div class="flex-container-new">
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
    </div>
</div>

在上述代码的一行中包含三个元素的情况下，我的问题是我希望最后一行中的最后一个元素被推到左侧，与它上面一行中的中间元素对齐。遗憾的是，bootstrap 不是一种选择。这是为了学习目的。有没有办法只用 CSS 就可以实现上述目标？非常感谢。

最佳答案

使用 CSS Grid 控制起来更容易，因为我们可以指定 x 和 y 轴。使用 Flexbox，您只能可靠地控制 x 轴。如果您还没有听说过 fr 单位，它是 defined by Mozilla如下:

The fr, which is short for “fraction”, is a unit which represents a fraction of the available space in the grid container.

使用 Grid 的另一个好处是我们可以删除 .box 中设置的 height 和 margin-bottom code> 以及 flex-wrap 规则。关于这个网格布局的一切，从单元格的高度到它们之间的 grid-gap 间距，都在父级中定义。

.grid-container-new {
  background: lightblue;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 300px);
  grid-gap: 20px;
}

.box {
  border: 1px solid black;
  background: orange;
}

<div class="grid-container-new">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

jsFiddle

关于html - 结合 flex-start 和 space-between 的外观，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55231822/

上一篇：html - css float 不显示右侧的 div

下一篇：html - 与内联网格相关的 CSS 在 Gmail 中消失

相关文章：

php - foreach 循环中仅输出一次值

javascript - Canvas 中的重力/跳球，javascript

css - 预期 "indent"，得到 "outdent"

css - 修复了具有可滚动内容区域的 flexbox 布局的内容标题

html - 将导航栏无序列表与 flexbox 对齐

html - 与前面的第一个元素重叠的 div

javascript - 如何自定义 bootstrap fixed navbar-default 以便 li 元素向下对齐？

html - 为什么第二页的页脚不在底部？

当带有类的选项卡可见时jquery隐藏元素

html - 标题后垂直居中元素，动态加载的文本全部在静态容器中