使用 flexbox 为 li 添加边距

Question

我正在使用 flexbox 来布置我的东西。我有 5 lis（到目前为止，但会改变），宽度如下：flex-basis:calc(100%/3)。所以每行会有3个li's。包装器 (ul) 的 width 为 70%。

到目前为止一切顺利。问题是，当我向 li's 添加边距时。当我将 margin 添加到 li's 时，每行将只有 2 个 li's 和一些额外的 space，但我需要 3.

所以我找到了 2 个给我其他问题的解决方案：

一种解决方案是将边距添加到 li's，比方说 10px。然后从每个 li's 的 width 和 height 中减去 20px (10 * 2)。我不能那样做，因为我需要 li's 是我设置的大小，而不是更小。
另一个解决方案是将 justify-content 设置为 space-around 或 space-between。问题是我需要 lis 位于列和行中（如图表）。如果我更改 justify-content，li's 将不会像订单那样出现在图表中。

有没有办法在不影响任何其他属性的情况下为 li 添加边距？

（如果这是唯一的选择，我愿意 JavaScript/JQuery。）

JSFiddle

这是一个代码片段：

body, html {
    height:100%; margin: 0; padding:0;
}
#flexWrapper {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    overflow: auto;
}
#flexContainer {
    width: 70%;
    background-color:yellow;
 list-style-type: none;
 padding: 0;
    margin: auto;
 
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: flex-start;
 align-items: center;
 align-content:flex-start;
}
li {
    background-color: tomato; border: 1px solid black; height:50px;
    box-sizing: border-box;
    flex-basis:calc(100%/3);
    margin:10px;
}

<div id="flexWrapper">
    <ul id="flexContainer">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
    </ul>
</div>

Answer 1

好的，所以我终于得到了有效的答案！我必须部分归功于@Syahrul 提出这个想法（在评论中）。

基本上我要做的就是这个。如果我们想增加 1.5% 的边距，我们将添加 (1.5 * 2) * 3 (1.5 * 2 因为边距在每个 li 的两边。* 3 because we have 3li'sin every row.) to thewidthof the wrapper ('#flexContainer), 所以我们有 79% 的宽度 #flexContainer.

接下来，我们将从 li 的 width 中减去 3%（边距大小 (1.5 * 2)）。那就是 flex-basis:calc(100%/3 - 3%).

给你！这是更新后的 JSFiddle

body, html {
    height:100%; margin: 0; padding:0;
}
#flexWrapper {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    overflow: auto;
}
#flexContainer {
    width: 79%;
    background-color:yellow;
 list-style-type: none;
 padding: 0;
    margin: auto;
 
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: flex-start;
 align-items: center;
 align-content:flex-start;
}
li {
    background-color: tomato; border: 1px solid black; height:100px;
    box-sizing: border-box;
    flex-basis:calc(100%/3 - 3%);
    margin:1.5%;
}

<div id="flexWrapper">
    <ul id="flexContainer">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
    </ul>
</div>

使用 flexbox 为 li 添加边距

Add a margin to li using flexbox

html

css

flexbox

JSFiddle