我有一个简单的flex-box布局的容器,如:

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

现在我想让最后一行中的项目与其他项目对齐。justify-content:之间的空间;应使用,因为网格的宽度和高度是可以调节的。

目前看来

在这里,我希望右下角的项目在“中间一列”中。最简单的方法是什么?下面是一个展示这种行为的小jsfiddle。

.exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); margin-bottom: 10px; } <div class="exposegrid"> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> </div>


当前回答

这很老套,但对我来说很管用。我试图达到一致的间距/边距。

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

其他回答

如果你知道行中元素之间的空间宽度和行中元素的数量,这将工作:

例如:一行中有3个元素,元素之间的间距为10px

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}

是的。!我们可以,但与一些媒体查询和列的最大数目是预定义的。

这里我用了4列。检查我的代码:

.container { display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; } .container .item { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; flex-basis: 25%; //max no of columns in %, 25% = 4 Columns } .container .item .item-child { width: 130px; height: 180px; background: red; margin: 10px; } @media (max-width: 360px) { .container .item { flex-basis: 100%; } } @media (min-width:360px) and (max-width: 520px) { .container .item { flex-basis: 50%; } } @media (min-width:520px) and (max-width: 680px) { .container .item { flex-basis: 33.33%; } } <div class="container"> <div class="item"> <div class="item-child">1</div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> <div class="item"> <div class="item-child"></div> </div> </div>

请注意 1)不需要创建子div。它可以是任何其他的标签,如'img' r任何你想要的。 2)如果你想要更多的列,调整媒体查询和最大数目。的列。

我修改了Dan Andreasson给出的示例,在元素上使用右边框来创建一个伪gutter。然后,您可以使用第n -child删除所需列网格计数的最后一个子节点上的边框。这里是一个演示https://codepen.io/JacobLett/pen/mdVoroM

/* demo only */ body { margin:0; padding:0; max-width:1024px; margin:0 auto; } .block-list { background: #ccc; border:1px solid #ccc; } .block-list .block-list__item { background: #eee; } /* demo only */ .block-list .block-list__item { min-height: 100px; margin-bottom: 1rem; } @media only screen and (min-width: 900px) { .block-list { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; background-color: #ffffff; margin: 1em auto; } .block-list:after { content: ""; -webkit-box-flex: 1; flex: auto; } .block-list__item { height: 10em; width: 25%; box-sizing: border-box; border-right: 10px solid white; } .block-list-2 .block-list__item { width: 50%; } .block-list-2 .block-list__item:nth-child(2n) { border: none; } .block-list-3 .block-list__item { width: 33.3%; } .block-list-3 .block-list__item:nth-child(3n) { border: none; } .block-list-4 .block-list__item { width: 25%; } .block-list-4 .block-list__item:nth-child(4n) { border: none; } .block-list-5 .block-list__item { width: 20%; } .block-list-5 .block-list__item:nth-child(5n) { border: none; } .block-list-6 .block-list__item { width: 16.66%; } .block-list-6 .block-list__item:nth-child(6n) { border: none; } } <h2>2 column</h2> <div class="block-list block-list-2"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>3 column</h2> <div class="block-list block-list-3"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>4 column</h2> <div class="block-list block-list-4"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>5 column</h2> <div class="block-list block-list-5"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div> <h2>6 column</h2> <div class="block-list block-list-6"> <div class="block-list__item">1 </div> <div class="block-list__item">2 </div> <div class="block-list__item">3 </div> <div class="block-list__item">4 </div> <div class="block-list__item">5 </div> <div class="block-list__item">6 </div> </div>

如果你想要一个在项目之间有一些空间的网格,并且项目开始时没有任何初始空间,那么这个简单的解决方案是有效的:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

如果你想要初始的5px空间,那么只需删除负边距:)简单。

https://jsfiddle.net/b97ewrno/2/

被接受的答案,虽然很好,但它导致第二行元素之间没有空格。

有一种没有flexbox的方法,尽管您需要满足以下条件。1)容器有填料。2)项目是相同的大小,你确切地知道你想要多少每行。

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

容器右侧较小的填充允许每个列表项右侧的额外填充。假设与列表对象相同的父对象中的其他项被填充了0 5%,它将与它们齐平。你也可以调整百分比到你想要的幅度,或者使用计算px值。

当然,你也可以使用n -child (IE 9+)来删除每第三个框上的空白。