我有一个简单的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>


当前回答

这个问题用CSS网格解决了,

这个解决方案只适用于你有固定数量的列,即没有。要显示在单行中的元素

->使用网格但不指定行数,随着元素数量的增加,它包装成列并动态添加行,我在这个例子中指定了三列

->你不需要给你的子/细胞任何位置,因为它会使它修复,这是我们不想要的。

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

其他回答

这是许多答案的组合,但它确实是我所需要的——这是,将flex容器中的最后一个子元素对齐到左侧,同时保持空间之间的行为(在这种情况下,它是一个三列布局)。

加价如下:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

有一种没有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+)来删除每第三个框上的空白。

如果你想让最后一项与网格对齐,请使用以下代码:

网格容器

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

网格中的项

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

诀窍是将项目的max-width设置为.card-grid的max-width:after。

Codepen上的现场演示

这个问题用CSS网格解决了,

这个解决方案只适用于你有固定数量的列,即没有。要显示在单行中的元素

->使用网格但不指定行数,随着元素数量的增加,它包装成列并动态添加行,我在这个例子中指定了三列

->你不需要给你的子/细胞任何位置,因为它会使它修复,这是我们不想要的。

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

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

这里我用了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)如果你想要更多的列,调整媒体查询和最大数目。的列。