多个具有margin-right的flexbox，除了行中的最后一个？没有JS？ [英] Multiple flexboxes with margin-right, except the last one in the row? Without JS?

问题描述

请参阅以下图片：

当前设置位于左上角。如果我添加更多的红色框，他们将包装到下一行，留下第一行最后一个红框的10px右边距。

我的问题：

有什么方法可以获得右上角的例子， / strong>，但不使用JS， display：table 或负边距shenanigans？

解决方案

>因为在图像中你使用 width：25％，我假设你想要每行4个元素。

，你只需要

  .red-box {
 width：calc -  30px / 4）; 
 margin：0 10px 10px 0; 
} 
 .red-box：nth-​​child（4n）{
 margin-right：0; 
} 
  

  #wrapper {display：柔性; flex-wrap：wrap; background：＃01FF00;}。red-box {width：calc（25％ -  30px / 4）; margin：0 10px 10px 0; height：100px; background-red-box：nth-​​child（4n）{margin-right：0;}  

 < div id =wrapper> < div class =red-box>< / div> < div class =red-box>< / div> < div class =red-box>< / div> < div class =red-box>< / div> < div class =red-box>< / div> < div class =red-box>< / div> < div class =red-box>< / div>< / div>  

$ b

See the following image:

Current setup is at top-left. If I add more red boxes, they will wrap to the next line, leaving a 10px right margin of the last red box on the first line.

My question:

Is there any way to get the top-right example, as well as the nice-to-haves, with flex-boxes, but without resorting to JS, display:table, or negative margin shenanigans?

解决方案

Since in the image you use width: 25%, I assume you want 4 element per line.

Therefore, you only need

.red-box {
    width: calc(25% - 30px/4);
    margin: 0 10px 10px 0;
}
.red-box:nth-child(4n) {
    margin-right: 0;
}

#wrapper {
    display: flex;
    flex-wrap: wrap;
    background: #01FF00;
}
.red-box {
    width: calc(25% - 30px/4);
    margin: 0 10px 10px 0;
    height: 100px;
    background: red;
}
.red-box:nth-child(4n) {
    margin-right: 0;
}

<div id="wrapper">
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
    <div class="red-box"></div>
</div>

这篇关于多个具有margin-right的flexbox，除了行中的最后一个？没有JS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！