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


当前回答

似乎没有人在最后一项上提出弹性增长的解决方案。 这个想法是让你的最后一个伸缩物品占据所有它可以使用的位置:1。

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

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

注意:这个解决方案并不完美,特别是当你在你的伸缩项目中有居中的元素时,因为它将以可能巨大的最后一个伸缩项目为中心。

其他回答

你不能。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容器中,其子元素的大小限制以及适当子元素的边距——取决于所需的列数。

对于一个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

这里是另外两个scss mixins。

这些mixins假定你不会使用像Isotope这样的js插件(它们不尊重html标记顺序,因此会打乱css n条规则)。

此外,您将能够充分利用它们,特别是当您以移动优先的方式编写响应性断点时。理想情况下,您将在较小的断点上使用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);
}

显然,这取决于你最终设置容器的填充/边距/宽度和单元格的底部边距等。

希望能有所帮助!

正如其他海报所提到的-没有干净的方法来左对齐flexbox的最后一行(至少按照目前的规范)

然而,它的价值在于:使用CSS Grid Layout模块,这是非常容易的:

基本上相关代码可以归结为:

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

1)将容器元素设置为网格容器

2)设置网格的自动列宽度为100px。注意使用了自动填充(而不是自动贴合(对于单行布局)将空轨道折叠为0),导致项目展开以占用剩余空间。当网格只有一行时,这将导致一个合理的“空格”布局,这在我们的情况下不是我们想要的。(请查看这个演示,看看它们之间的区别))。

3)为网格行和列设置间隙/沟槽-在这里,因为想要一个“空间之间”的布局-间隙实际上是一个最小的间隙,因为它会根据需要增长。

4)类似于flexbox。

ul { 显示:网格; Grid-template-columns: repeat(自动填充,100px); grid-gap: 1快速眼动; justify-content:之间的空间; /*无趣属性*/ list-style:没有; 背景:小麦; 填充:2快速眼动; 宽度:80大众; 保证金:0自动; } 李{ 高度:50 px; 边框:1px纯绿色; } < ul > <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> < / ul >

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

你还可以这样做:

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