Question

我有7个固定宽度（256px）和margin: 20px的组件，我希望它们在网格中对齐，但我试图让最后一行中的最后一项始终为合理的权利，因此它与最右边的列对齐。我还希望列网格在页面上居中。我尝试了一些事情，但我已经卡住了。

我尝试用弹性盒子做这件事，虽然我完全有可能错过了一些可以让它工作的柔性盒子，但我没有运气。我得到的最接近的是：

.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
}

但是，如果最后一行的组件数量少于其他行，那么，如果最后一行的组件数量少于其他行，则对齐内容，同时它会使组件集中在页面上，使这些组件居中并消除网格效应。

我也试过这个没有弹性盒的东西，而且只是接近：

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

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

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

（图片以防我不能解释它）

行为我正在寻找： http://imgur.com/a/OacSW

行为不对： http://imgur.com/a/VLttI

HTML供参考：

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

Answer 1

通过几个媒体查询，你应该可以做到这一点，你可以将伪元素用作 ghost 元素，并填补最后一个和最后一个项目之间的空白。

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

如果你需要连续5个，一个只需要在其中一个伪元素上加倍，256px + 256px + 40px（边距为40px），连续6个，宽度为3倍等。 / p>

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

作为我有多固执的证明，这是我的解决方案。

诀窍是有一些可以被2..3..4..5整除的元素，所以根据需要添加额外的元素。

当然，这太丑了，我选择隐藏源代码： - （

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border: solid 1px red;
}

.grid div {
  margin: 20px;
  width: 256px;
  height: 48px;
  background-color: tomato;
}

.grid div:last-of-type {
  background-color: fuchsia;
  order: 3;
  margin-top: -68px;
}

.grid span {
  margin: 0px 20px;
  width: 256px;
  height: 0px;
  order: 2;
}

.grid span:first-of-type {
  margin-top: 40px;
  height: 48px;
}

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

使用固定宽度单元格设置网格样式

2 个答案: