弹性框:将最后一行与网格对齐

Question

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

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

现在我希望最后一行中的项目与另一行对齐.justify-content: space-between;应该使用,因为可以调整网格的宽度和高度.

目前它看起来像

在这里,我希望右下角的项目位于"中间列"中.实现这一目标的最简单方法是什么？这是一个显示此行为的小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>

Answer 1

添加::after自动填充空间.无需污染您的HTML.这是一个显示它的codepen:http://codepen.io/DanAndreasson/pen/ZQXLXj

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

.grid::after {
  content: "";
  flex: auto;
}

Answer 2

一种技术是插入一些给定零高度的额外元素(与您预期的最大元素数一样多).空间仍然存在分歧,但多余的行崩溃为空:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

将来,通过使用多个可以实现这一点::after(n).

Answer 3

正如其他海报所提到的那样 - 没有干净的方法将最后一行与flexbox对齐(至少根据当前规范)

但是,它的价值在于:使用CSS网格布局模块,这非常容易制作:

基本上相关的代码归结为:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1)使容器元素成为网格容器

2)使用宽度为100px的自动列设置网格.(注意使用自动填充(如同auto-fit- 对于1行布局)将空轨道折叠为0 - 导致项目扩展以占用剩余空间.这将导致合理的"间隔" '网格只有一行时的布局,在我们的例子中不是我们想要的.(查看这个演示以了解它们之间的区别)).

3)设置网格行和列的间隙/檐槽 - 这里,因为需要'间隔'布局 - 间隙实际上是最小间隙,因为它将根据需要增长.

4)类似于flexbox.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen演示(调整大小以查看效果)

Answer 4

没有任何额外的标记,只需添加::after为我指定列的宽度.

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

使用这样的HTML:

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

Answer 5

你不能.Flexbox不是网格系统.它没有语言结构来完成你所要求的,至少在你使用时没有justify-content: space-between.使用Flexbox最接近的是使用列方向,这需要设置显式高度:

http://cssdeck.com/labs/pvsn6t4z(注意:前缀不包括在内)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

但是,使用具有更好支撑但不需要设置特定高度的列会更简单:

http://cssdeck.com/labs/dwq3x6vr(注意:前缀不包括在内)

ul {
  columns: 15em;
}

Answer 6

一种可能的解决方案是justify-content: flex-start;在.grid容器上使用它的子节点的大小限制,以及相应子元素的边距- 取决于所需的列数.

对于3列网格,基本CSS将如下所示:

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

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

这是另一个不完美的解决方案,但它确实有效.

http://codepen.io/tuxsudo/pen/VYERQJ

Answer 7

您也可以这样做：

.exposegrid:last-child {
  margin-right: auto;
}

Answer 8

使用 CSS 网格为我解决了这个问题，

此解决方案仅适用于您有固定数量的列，即没有。要在一行中显示的元素数

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

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

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

Answer 9

是。！我们可以但可以进行一些媒体查询，并且可以预定义最大列数。

在这里使用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'或您想要的任何标签
。2）如果您想要更多列，请调整媒体查询和最大列数。

Answer 10

如果您想要一个网格，在项目之间和项目之间都留有一定的空间，而没有任何初始空间，则可以使用以下简单解决方案：

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

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

Answer 11

如果要将最后一项与网格对齐，请使用以下代码：

网格容器

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

}

诀窍是将项目的最大宽度设置为等于 .card-grid:after 的最大宽度。

Codepen 上的现场演示

Answer 12

我知道这里有很多答案，但是..最简单的方法是使用a grid代替flexand grid template columns和repeatand auto fills，在其中您必须根据100px代码段设置为每个元素赋予的像素数。

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     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>