左对齐flexbox的最后一行，使用空格和margin之间的空格

我在容器中有一个未知数量的元素，需要在外部没有边距，但是它们之间的边距最小。左对齐flexbox的最后一行，使用空格和margin之间的空格

我还需要这些来证明space-between和最后一行左对齐。

我试图用Flexbox的做到这一点，像这样：

.outside { 
 
    border: 1px solid black; 
 
} 
 
.container { 
 
    margin: -5px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.container:after { 
 
    content: ''; 
 
    flex: auto; 
 
} 
 
.box { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
}

<div class="outside"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

View JSFiddle

这工作正常，除了最后一排的间距是关闭的，因为你可以在截图中看到：

如果我们不知道将会有多少列（使用flexbox或JavaScript以外的其他东西），有什么方法可以使它工作吗？

来源

2016-12-02 James Simpson

等待几年。 Flexbox级别2可能会添加一些功能来解决此问题。 – Oriol

柔性容器中的最后一行对齐可能是当今flexbox中＃1缺失的功能。另一个常见问题是“列换行”的各种缺陷。希望在下一版本的flexbox规范中解决这两个问题。 –

有没有办法做到这一点没有flexbox，我们可能会忽略？ –

最后一行对齐是flexbox的常见问题。

要考虑的一种方法是在最后一个可见项之后使用不可见的Flex项目。简而言之，我只是称他们为“幻影物品”。

.outside { 
 
    border: 1px solid black; 
 
} 
 
.container { 
 
    margin: -5px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.container:after { 
 
    content: ''; 
 
    flex: auto; 
 
} 
 
.box { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
} 
 

 
.hidden { 
 
    visibility: hidden; 
 
    margin: 0 5px; 
 
    height: 0; 
 
}

<div class="outside"> 
 
    <div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    <div class="box hidden"></div> 
 
    </div> 
 
</div>

来源

2016-12-02 16:21:14

只有当我们知道连续有多少人（我注意到我发布了错误的链接，它不应该在小提琴中有500px的宽度，我现在已经更新）时，这才会起作用。 –

是的，我看到您更新了您的代码以删除容器上的宽度。没有这个限制，你可能需要诉诸JS，因为我不相信当前的CSS技术可以解决问题。我会留下我的答案，以供一般参考。 –

你并不需要知道连续有多少物品。你只需要知道最多**的项目数量可以在一行中，并设置尽可能多的隐藏框作为这个最大值 – vals

迈克尔是正确的，问题是你不能做space-between，然后选择最后一排是flex-start。对我伸出的部分虽然是指定的宽度。这很重要吗？

如果不是，通常的做法是使用媒体查询来控制每行显示的项目数。您可以设置很多媒体查询步骤，以确保项目不会拉得太大，但这样就与正常栅格排水沟之间的距离更紧密，并使“最后一排问题”消失。认为这会工作？

例子：http://codepen.io/anon/pen/JbpPKa

来源

2016-12-02 16:55:33

宽度不应该在那里，并且不在问题的代码中。造成这种困难的原因是它必须具有响应能力，而且我们不知道容器有多宽，因此不知道每行有多少个元素。 –

-1

堆栈溢出不会允许我Michael_B的回答发表评论，但我也想说明如何计算幻象元素被追加可以用JavaScript来实现的人谁是试图数量解决这个问题。

/** 
    * @param {Integer} numElements The number of elements you're displaying. 
    * @param {Number} element Width Width, in pixels, of each element. 
    * @param {Number} margin Width, in pixels. Your minimum target margin between items. 2x the margin on each individual item. 
    * @param {Number} containerWidth Width, in pixels, of the containing element. 
    */ 
    const getNumPhantomElements = ({numElements, elementWidth, margin, containerWidth}) => { 
    const elementsPerRow = Math.floor(containerWidth/(elementWidth + margin)); 
    const elementsInLastRow = numElements % elementsPerRow; 
    const numPhantomElements = elementsPerRow - elementsInLastRow; 

    return numPhantomElements; 
    };

在这种情况下：

const containerWidth = document.querySelector('.container').offsetWidth; 
const numPhantomElements = getNumPhantomElements({ 
    numElements: 21, 
    elementWidth: 50, 
    margin: 10, // 2x 5px margin on each box 
    containerWidth 
}); // Append this many elements (output depends on your viewport size)

来源

2016-12-08 17:22:44

左对齐flexbox的最后一行，使用空格和margin之间的空格

回答

相关问题