我希望 Flexbox 子项占据其父项宽度的 50%，并且它们之间还有 10px 的间隙。我怎样才能实现这个目标？

Question

所以我的目标是有 3 个子元素，每个元素的宽度为 50%，并使用 flex-wrap:wrap 以便第三个元素低于第一个元素，但是，我还希望第一个和第二个子元素之间有 10px 的间隙，当我向第一个子元素添加 margin-right: 5px ，向第二个子元素添加 margin-left: 5px ，第二个子元素包裹在第一个子元素下方，因为额外的边距没有为同一行上的第二个子元素留下足够的空间。

我如何计算出 10px 占宽度的百分比是多少？

.projects {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.project {
    width: 50%
}
.project:nth-child(odd) {
    margin-right: 5px;
    background-color: red;
}
.project:nth-child(even) {
    margin-left: 5px;
    background-color: blue;
}

<div class='projects'>
   <div class='project'>s</div>
   <div class='project'>s</div>
   <div class='project'>s</div>
</div>

Answer 1

尝试这个解决方案

.projects {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
}
.project {
    flex:0 1 calc(50% - 10px);
    margin: 5px;
}
.project:nth-child(1) {
    background-color: green;
}
.project:nth-child(2) {
    background-color: red;
}
.project:nth-child(3) {
    background-color: blue;
}

<div class='projects'>
   <div class='project'>s</div>
   <div class='project'>s</div>
   <div class='project'>s</div>
</div>