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


当前回答

你还可以这样做:

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

其他回答

我修改了Dan Andreasson给出的示例,在元素上使用右边框来创建一个伪gutter。然后,您可以使用第n -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>

这是许多答案的组合,但它确实是我所需要的——这是,将flex容器中的最后一个子元素对齐到左侧,同时保持空间之间的行为(在这种情况下,它是一个三列布局)。

加价如下:

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

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

假设:

你想要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>

简单使用Jquery/Javascript技巧添加一个空div:

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

没有任何额外的标记,只是添加::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>