501

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

4

34 回答 34

567

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

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

.grid::after {
  content: "";
  flex: auto;
}
于 2016-01-15T17:32:09.627 回答
177

一种技术是插入一些额外的元素（与您期望在一行中拥有的最大元素数一样多），这些元素的高度为零。空间仍然被分割，但多余的行倒塌为空：

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

于 2014-02-25T15:27:20.967 回答
173

正如其他海报所提到的 - 没有干净的方法将最后一行与 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 - 导致项目扩展以占用剩余空间。这将导致合理的 'space-between ' 网格只有一行时的布局，这在我们的例子中不是我们想要的。（查看这个演示以了解它们之间的区别））。

3）为网格行和列设置间隙/排水沟 - 在这里，因为想要一个“间隔”布局 - 间隙实际上是最小间隙，因为它会根据需要增长。

4) 类似于弹性盒。

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 Demo（调整大小看效果）

于 2017-09-07T14:46:35.560 回答
38

没有任何额外的标记，只需添加::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>
于 2016-08-13T12:54:30.623 回答
27

我知道这里有很多答案，但是.. 最简单的方法是使用 agrid而不是flex和grid template columnswith 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>

于 2019-02-01T10:57:04.037 回答
16

你不能。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;
}
于 2013-09-11T15:03:11.397 回答
14

一种可能的解决方案是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

于 2015-03-13T15:58:12.497 回答
9

如果您想要一个在项目之间有一些空间的网格，并且项目开始时没有任何初始空间，那么这个简单的解决方案可以工作：

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

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

于 2018-04-19T12:16:38.990 回答
7

是的。！我们可以，但有一些媒体查询和预定义的最大列数。

这里使用 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）如果你想要更多列，请调整媒体查询和最大列数。

于 2017-06-07T18:45:47.617 回答
7

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

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

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

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

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

于 2019-12-17T06:28:55.380 回答
5

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

网格容器

.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 上的现场演示

于 2017-02-21T09:32:27.213 回答
5

你也可以这样做：

.exposegrid:last-child {
  margin-right: auto;
}
于 2021-03-10T13:31:48.347 回答
3

可以使用“flex-start”并手动添加边距。它需要一些数学技巧，但绝对很容易做到，并且可以很容易地与像 LESS 这样的 CSS 预处理器一起使用。

例如，请参阅这个 LESS 混合：

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

然后它可以很容易地用于显示响应式网格布局：

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

这是一个例子

http://codepen.io/anon/pen/YyLqVB?editors=110

于 2015-10-27T18:09:44.140 回答
2

这是很多答案的组合，但它正是我所需要的——也就是说，将 flex 容器中的最后一个子元素向左对齐，同时保持间隔行为（在这种情况下，它是一个三列布局）。

这是标记：

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

.flex-container:after {
  content: "";
  flex-basis: 30%;
}
于 2017-01-27T01:56:18.730 回答
2

如果您希望网格视图中的项目与最后一个元素的距离相等。确保您的卡片宽度为 100% 使用以下 css。这工作得很好

.container {
  /* ... snip ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-between;
  grid-gap: 20px;
}
于 2021-10-08T06:47:29.023 回答
1

此版本是固定宽度块的最佳方式：

http://codepen.io/7iomka/pen/oxxeNE

在其他情况下 - dalgard 版本

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

body {
  padding: 5%;
}

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

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

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width: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>

于 2016-03-09T10:02:16.997 回答
1

只需添加几个具有相同属性的假项目，除了高度设置为 0px 到最后。

于 2020-01-24T10:32:42.780 回答
1

即使 Flexbox 出现了差距，我也会添加一个可行的解决方案。

它使用兄弟组合器来检查 2 个条件。

它检查的第一个条件是元素是否是倒数第二个div:nth-last-child(2)

对于 4 列布局，我们需要检查位置 2 和 3 检查它是在 4 的第二行div:nth-of-type(4n+2)还是在连续的第三行div:nth-of-type(4n+3)

对于 3 列布局，我们只需要检查位置 2

div:nth-of-type(3n+2)

然后我们可以像下面这样组合 4 列布局

div:nth-last-child(2) + div:nth-of-type(4n+2)

div:nth-last-child(2) + div:nth-of-type(4n+3)

我们还需要处理一种极端情况，任何 3n+2 和 4 的倍数的数字都将获得 35% 的边距div:nth-last-child(2) + div:nth-of-type(4n+4)

3列布局将是

div:nth-last-child(2) + div:nth-of-type(3n+2)

然后我们需要为上面的选择器添加一个边距。需要计算margin-right，这取决于flex-basis。

我添加了一个包含 3 列和 4 列的示例以及一个媒体查询。我还添加了一个小的 JavaScript 按钮，它添加了一个新的 div，以便您检查它是否有效。

它是一点点 CSS，但它可以工作。如果您需要更多解释，我也在我的网站上写过这个。 https://designkojo.com/css-programming-using-css-pseudo-classes-and-combinators

var number = 11;

$("#add").on("click", function() {
    number = number + 1;
    $("#main").append("<div>" + number + "</div>");
});
body {
  margin: 0;
}
main{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start; /* vertical */
  justify-content: space-between;
  min-width: 300px;
  max-width: 1200px;
  margin: 20px auto;
  background-color: lightgrey;
  height: 100vh;
}
div {
  flex-basis: 30%;
  background-color: #5F3BB3;
  min-height: 20px;
  height: 50px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9af3ff;
  font-size: 3em;
}


div:nth-last-child(2) + div:nth-of-type(3n+2) {
  background-color: #f1b73e;
  margin-right: 35%;
}

@media screen and (min-width: 720px) {

  div {
    flex-basis: 22%;
  }

  div:nth-last-child(2) {
    background-color: greenyellow;
  }

  div:nth-of-type(4n+2) {
    background-color: deeppink;
  }

  /* Using Plus combinator is for direct sibling */
  div:nth-last-child(2) + div:nth-of-type(4n+2) {
    background-color: #f1b73e;
    margin-right: 52%;
  }

  div:nth-last-child(2) + div:nth-of-type(4n+3) {
    background-color: #f1b73e;
    margin-right: 26%;
  }

  /* Also need to set the last to 0% to override when it become (3n+2)
   * Any number that is 3n+2 & multiple of 4 will get the 35% margin-right
   * div:nth-last-child(2) + div:nth-of-type(3n+2)
   */

  div:nth-last-child(2) + div:nth-of-type(4n+4) {
    background-color: #f1b73e;
    margin-right: 0;
  }

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>My New Project</title>
</head>

<body>

<header>


</header>

<button id="add">Add</button>
<main id="main">

  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>


</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="action.js"></script>
</body>
</html>

于 2021-01-08T07:03:17.053 回答
0

有一种方法不需要 flexbox，尽管您需要满足以下条件。1）容器有填充物。2) 项目大小相同，您确切知道每行需要多少个。

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

容器右侧较小的填充允许每个列表项右侧的额外填充。假设与列表对象相同的父项中的其他项填充 0 5%，它将与它们齐平。您还可以将百分比调整为您想要的边距或使用计算 px 值。

当然，您可以通过使用 nth-child (IE 9+) 删除容器上的边距来执行相同的操作，而无需容器上的填充。

于 2014-12-11T01:17:44.267 回答
0

使用 flexbox 和一些媒体查询，我做了这个小变通：http ://codepen.io/una/pen/yNEGjv （它有点hacky但有效）：

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}
于 2015-07-15T15:47:10.430 回答
0

我为它制作了一个 SCSS mixin。

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

这是 codepen 链接：http ://codepen.io/diana_aceves/pen/KVGNZg

您只需以百分比和列数设置项目宽度。

我希望这可以帮助你。

于 2016-02-08T16:25:54.553 回答
0

这是另外几个 scss mixin。

这些 mixin 假设您不会使用 Isotope 之类的 js 插件（它们不尊重 html 标记顺序，因此会混淆 css nth 规则）。

此外，您将能够充分利用它们，尤其是当您以移动优先方式编写响应式断点时。理想情况下，您将在较小的断点上使用 flexbox_grid() 并在以下断点上使用 flexbox_cell()。flexbox_cell() 将负责重置以前设置的边距，不再用于较大的断点。

顺便说一句，只要您正确设置了容器的 flex 属性，如果需要，您也可以仅在项目上使用 flexbox_cell()。

这是代码：

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

用法：

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

显然，最终由您来设置容器的填充/边距/宽度和单元格的底部边距等。

希望能帮助到你！

于 2016-03-09T11:05:24.387 回答
0

这很hacky，但它对我有用。我试图实现一致的间距/边距。

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

于 2016-05-05T23:12:50.980 回答
0

似乎没有人在最后一项上提出 flex-grow 解决方案。这个想法是让你的最后一个 flex 项目占据它可以使用 flex-grow 的所有位置：1。

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

.grid > *:last-child {
  flex-grow: 1;
}

注意：这个解决方案并不完美，特别是如果您的弹性项目中有居中的元素，因为它将以可能巨大的最后一个弹性项目为中心。

于 2016-05-31T15:01:02.333 回答
0

哦，男孩，我想我找到了一个用最少的 CSS 和没有 JS 的好解决方案。一探究竟：

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}
<ul>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

这里的关键是要记住，我们想要实现的正是我们想要实现的text-align: justify！

HTML 中的空元素可以在不改变外观的情况下完美显示最后一行，但考虑到您要实现的目标，可能不需要。为了在每种情况下实现完美平衡，您至少需要 x-4 个空元素，x 是要显示的元素数，或者 n-2，n 是要显示的列数。

于 2018-05-21T18:17:46.043 回答
0

假设：

  • 你想要 4 列网格布局与包装
  • 项数不一定是4的倍数

为除第 1、5、9 项以外的每个项目设置左边距，依此类推。如果左边距为 10px，则每行将有 30px 的边距分布在 4 个项目中。项目的百分比宽度计算如下：

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

对于涉及最后一行 flexbox 的问题，这是一个不错的解决方法。

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0 3em;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

于 2018-07-04T22:40:05.840 回答
0

如果您知道行中元素之间的空格宽度和行中元素的数量，这将起作用：

示例：一行 3 个元素，元素之间的间距为 10px

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}
于 2019-06-06T08:42:55.063 回答
0

我修改了 Dan Andreasson 提出的示例，在元素上使用右边框来创建人造排水沟。然后，您可以使用 nth-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>

于 2020-10-27T09:34:27.543 回答
0

如果单个子项具有显式宽度（例如 32%），您可以通过向父项添加 :after 元素并赋予其相同的显式宽度来解决此问题。

于 2020-11-11T15:41:05.613 回答
0

这里有一些解决方案，人们建议编写精确的布局 css 类，用伪元素伪造最后一项，使用非 flexbox 方法等。

一个大问题是邻居之间的间隙（大小写对齐的按钮环绕多行）。在这种情况下，您不希望项目相互接触，需要有间隙。我只想添加一个尊重差距并适用于任意数量项目的采用性解决方案。虽然它也是基于假最后一个元素的想法，但更普遍。有关详细信息，请参阅片段注释。

html {
  font-size: 1px;
}

.container {
  font-size: 16rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  background-color: orange;
  border-radius: 10rem;
  box-sizing: border-box;
  color: white;
  margin-bottom: 10rem;
  padding: 15rem 10rem;
  text-align: center;
}
<!--
Our setup from design (example) used later in calculations:

container-width: 100%; (can be any)
max-per-row = 4;
total = 6;
desired-hor-gap = 10rem; (equal to vert. gap)

If you go dynamic (drawing html according to the coming data either in a backend template or in a frontend template), you have to calculate and then set exact properties inline.

<i> (or any real html element) is needed to set inline styles to arrange the last row properly.

"2" in <i> calc function - is 6 % 4 since calc doesn't allow for "%" operator. But in real life you will calculate these numbers in JS or some backend template anyway.

   Formulas written in elements' calc functions. Seem to be self-descriptive, but the idea is to set for the last fake item the remainder width + hypothetical gaps.
-->

<div class="container">

<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>

<i style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4 * (4 - 2) + ( 4 - 2 - 1) * 10rem);"></i>
</div>

于 2021-05-27T12:21:03.453 回答
0

我找到了一个有效的解决方案，即 justify-content 也可以是 center / space-evenly / etc...（如果您知道单行中的项目数）：

HTML：

<section class="container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>

    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
  </section>

标签的数量<p>（可以是任何其他标签）是每行中的项目数减 1。对于不同的屏幕尺寸，您可以使用媒体查询对其进行操作。

CSS：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.flex-item {
  width: 300px;
  height: 300px;
  background: #21BA45;
}

.container > p {
  width: 300px;
  height: 300px;
}
于 2021-09-02T14:43:16.810 回答
-1

只需使用 Jquery/Javascript 技巧添加一个空 div：

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('<div class="exposetab"></div>');
}
于 2020-04-09T13:00:51.540 回答
-4

你想对齐

使用align-content: flex-start;而不是justify-content: space-between;

这会将最后一行的项目拉到左边，并且均匀地分配空间，

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  /*justify-content: space-between; remove this line!!!! */ 
}

https://codepen.io/anon/pen/aQggBW?editors=1100

danAnderson 解决方案不是动态的.PERİOD！

当项目宽度从 25 更改为 28 丹安德森失败图像之间的空间

丹安德森： https ://codepen.io/anon/pen/ZwYPmB?editors=1100

动态：https ://codepen.io/anon/pen/aQggBW?editors=1100

这就是我一直想说的。dans是hacky.....

于 2018-12-06T09:08:54.137 回答
-8

我能够justify-content: space-between在容器上做到这一点

于 2016-03-19T22:41:41.617 回答