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

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

添加::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;
}

一种技术是插入一些零高度的额外元素（与您期望连续拥有的元素的最大数量一样多）。空间仍然是分开的，但是多余的行折叠成零：

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>

将来，可以通过使用Multiple来实现::after(n)。

正如其他张贴者所提到的那样，没有一种干净的方法可以将最后一行与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演示（调整大小以查看效果）

没有任何额外的标记，只需添加即可::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>

你不能 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;
}

可能的解决方案是justify-content: flex-start;在.grid容器上使用容器，其子容器上的大小限制以及适当的子元素上的边距-取决于所需的列数。

对于三列网格，基本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

我知道这里有很多答案，但是..最简单的方法是使用a grid代替flexand grid template columnswith repeat和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>

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

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

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

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

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

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

网格容器

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

可以使用“弹性启动”并手动添加边距。它需要一些数学技巧，但是绝对容易实现，并且可以轻松地与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

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

仅当您具有固定的列数（即否）时，此解决方案才适用。在单行中显示的元素数

->使用网格但不指定行数，因为元素数增加，它会绕入列并动态添加行，在此示例中我指定了三列

->您不必为您的孩子/牢房提供任何位置，因为它可以解决这个问题，这是我们不希望的。

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

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

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>

有一种没有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+）来删除第三个框上的边距来在容器上进行填充而无需填充。

使用flexbox和一些媒体查询，我做了以下小变通方法：http ://codepen.io/una/pen/yNEGjv（虽然有点笨拙，但是可以工作）：

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

我为此做了一个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

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

希望对您有所帮助。

这是另外两个scss mixins。

这些mixins假定您将不使用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);
}

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

希望能帮助到你！

这很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/

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

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

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

注意：此解决方案不是完美的，尤其是如果您在flex项内有居中元素，因为它会在可能巨大的最后一个flex项上居中。

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

这是标记：

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

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

假设：

• 您需要带包装的4列网格布局
• 项目数不一定是4的倍数

在除第一个，第五个和第九个项目之外的其他所有项目上设置左页边距。如果左边距为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>

如果知道行中元素之间的间隔宽度和行中元素的数量，则可以这样做：

示例：连续3个元素，元素之间的间距为10px

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

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

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('<div class="exposetab"></div>');
}

哦，男孩，我认为我找到了一个使用最少的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是要显示的列数。

只需添加一些具有相同属性的假物品，除了最后将高度设置为0px即可。

你想对齐

用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丹·安德森时，图像之间的空间不足

danAnderson：https ://codepen.io/anon/pen/ZwYPmB ? editors = 1100

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

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

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