html - 我希望 flexbox 子项占据其父项宽度的 50%，并且它们之间也有 10px 的间隙。我怎样才能做到这一点？

Question

这个问题在这里已经有了答案:





How to add 1px margin to a flex item that is flex: 0 0 25%?

(3 个回答)



Better way to set distance between flexbox items

(42 个回答)


1年前关闭。




所以我的目标是有 3 个 child ，每个 child 都有 50% 的宽度并使用 flex-wrap: wrap 以便第三个元素比第一个元素更好，但是，我还希望第一个和第二个子元素之间有 10px 的间隙，以及何时我给第一个 child 添加了一个 margin-right: 5px ，给第二个 child 添加了一个 margin-left: 5px ，第二个 child 在第一个 child 的下面换行，因为额外的边距没有为同一行的第二个 child 留下足够的空间。

我的意思是要弄清楚那些 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:nth-child(1) {
    flex:0 1 calc(50% - 10px);
    margin: 5px;
    background: green;
}
.project:nth-child(2) {
    margin: 5px;
    background-color: red;
    flex:0 1 calc(50% - 10px);
}
.project:nth-child(3) {
    margin: 5px;
    background-color: blue;
    flex:0 1 calc(50% - 10px);
}

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