Html 我希望flexbox的孩子们拿走他们父母的50%'；宽度，并且它们之间的间隙为10px。我怎样才能做到这一点？

因此，我的目标是有3个子元素，每个子元素的宽度为50%，并使用flex wrap:wrap，这样第三个元素在第一个子元素上会变宽，但是，我也希望第一个子元素和第二个子元素之间的间距为10px，当我向第一个子元素添加右边距：5px，向第二个子元素添加左边距：5px时，第二个子对象包裹在第一个子对象下方，因为多余的边距没有为同一行上的第二个子对象留出足够的空间

我怎么才能算出这些10px的宽度是多少

.projects{
宽度：100%；
显示器：flex；
柔性包装：包装；
}
.项目{
宽度：50%
}
.项目：第n个孩子（单数）{
右边距：5px；
背景色：红色；
}
.项目：第n个孩子（偶数）{
左边距：5px；
背景颜色：蓝色；
}

s
s
s

试试这个解决方案

.projects{
宽度：100%；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}
.项目：第n个孩子（1）{
弹性：0.1计算（50%-10px）；
保证金：5px；
背景：绿色；
}
.项目：第n个孩子（2）{
保证金：5px；
背景色：红色；
弹性：0.1计算（50%-10px）；
}
.项目：第n个孩子（3）{
保证金：5px；
背景颜色：蓝色；
弹性：0.1计算（50%-10px）；
}

s
s
s

可能有问题，您可以试试

.projects{
宽度：100%；
显示器：flex；
flex:auto-auto；
柔性包装：包装；
}
.项目{
宽度：50%；
框大小：边框框；
}
.项目：第n个孩子（奇数）.m{
背景色：红色；
}
.项目：第n个孩子（偶数）.m{
背景颜色：蓝色；
}
m{
保证金：5px；
}

1.
2.
3.

使用flex属性指定flex项如何增长或收缩，以适应其flex容器中的可用空间

*{框大小：边框框；}
.项目{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
宽度：100%；
}
.projects>.project{
弹性：0计算（50%-10px）；
保证金：5px；
}
.projects>.project:第n个子项（奇数）{
背景色：红色；
}
.projects>.project:第n个子项（偶数）{
背景颜色：蓝色；
}

s
s
s