html - 设置具有固定宽度单元格的网格样式

Question

我有 7 个固定宽度 (256px) 和 margin: 20px 的组件，我希望它们在网格中对齐，但我试图获取最后一行中的最后一项始终保持右对齐，使其与最右边的列对齐。我还希望列网格在页面上居中。我尝试了一些方法，但我陷入了困境。

我尝试用 flex 盒来做这件事，虽然我完全有可能错过了一些关于 flex 盒的东西，可以让它工作，但我没有任何运气。我得到的最接近的是这样的:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
}

.grid div:last-child {
  margin-left: auto
}

但是 justify-content，虽然它使组件在页面上居中，但如果最后一行的组件少于其他行，则会将这些组件居中并破坏网格效果。

我也在没有 flex 盒的情况下尝试过这个，并且接近于:

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
   float: left;
}

.grid div:last-child {
  float: right;
}

这非常接近，我只需要一种方法将网格的宽度设置为 256px 的倍数(好吧，由于边距为 296px)，然后将网格在父级中居中。完全可以使用媒体查询，但我觉得应该有一个更简单的解决方案。

(图片以防我解释得不好)

我正在寻找的行为: /image/y5ySx.jpg

不正确的行为: /image/xakgw.jpg

引用 HTML:

<div class="grid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>

Answer 1

通过几个媒体查询，您应该能够做到这一点，您可以使用伪元素作为幽灵元素，并填充最后一个和倒数第二个元素之间的间隙。

这里我还给了 grid 一个最大宽度，所以不能连续有 5 个，我这样做是因为如果你需要它，你将需要一个额外的元素作为倒数第二个来充当 ghost，因为需要 3 个 ghost 元素(2 个伪 + 1)来解决这个问题。

如果您需要将 5 个元素排成一行，只需将其中一个伪元素的大小加倍，256px + 256px + 40px(边距为 40px)，如果排成 6 个元素，则为宽度的 3 倍等。

html, body {
  margin: 0;
}
.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
   background: lightgray;
}
  .grid div:last-of-type {
    order: 2
  }

@media screen and (min-width: 592px) {
  .grid::after {
    content: '';
    margin: 20px;
    width: 256px;
    height: 0;
    order: 1;
  }
}

@media screen and (min-width: 888px) {
  .grid::before {
    content: '';
    margin: 20px;
    width: 256px;
    height: 0;
    order: 1;
  }
}

@media screen and (min-width: 1184px) {
  .grid::before {
    display: none;
  }
}

@media screen and (min-width: 1480px) {
  .grid::before {
    display: inline;
    width: 552px;
  }
}

<div class="grid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>