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

网格容器

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

我为它做了一个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;
    }
  }
}

这是代码依赖的链接:http://codepen.io/diana_aceves/pen/KVGNZg

你只需要设置项目的宽度百分比和列数。

我希望这能帮助到你。

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

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

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

哦，男孩，我想我找到了一个很好的解决方案与最小的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是要显示的列的数量。

尽管Flexbox即将出现缺口，但我将添加一个有效的解决方案。

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

它检查的第一个条件是元素是否位于倒数第二div:

对于4列布局，我们需要检查位置2和3 检查它是否在第4个div的第二行:第n -of-type(4n+2)或第3行div:第n -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:n -last-child(2) + div:n -of-type(4n+4)

3栏布局将

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

然后我们需要给上面的选择器添加一个边距。右边的差额将需要计算，并将取决于弹性基制。

我添加了一个带有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>