Html 如何调整react flexbox网格项的宽度以允许它们之间的空间？

我的问题应该很简单，可以解决，但我对flexbox的理解还不够，无法理解到底发生了什么

我试着让两个div并排，中间有一些空间，但我根本无法调整它们的宽度

html（jsx）代码如下所示：

        <Col className="DivA"  xs={12} sm={12} md={12} lg={3}>
           //stuff
        </Col>

        <Col  className="DivB" xs={12} sm={12} md={12} lg={9}>
           //stuff
        </Col>

我可以调整边距，但它会将另一个div移到第一个div的下方。我可以调整除宽度之外的所有其他属性。我希望div之间有空间，但我尝试过的都不起作用

我不知道这房子是从哪里来的，甚至不知道是从哪里来的！在css中，重要的是什么都不做

---

编辑：通过在DivA中更改lg={2.5}并在DivB中添加一个边距找到了一个解决方法，但我仍然想知道是否有更好的方法

不要将

float

与

flex

一起使用。没用。更好的是，在布局方面，根本不要使用

float

您可以将容器上的

flex

与

justify content:space-between

一起使用

例如，我添加了

width:calc（50%-20px）

，这意味着它们之间将有40px的空间

见下文

.wrapper{
显示器：flex；
宽度：100%；
证明内容：之间的空间；
}
.项目{
高度：50px；
背景：红色；
宽度：计算（50%-20px）；
}

---

不要将

浮动

与

flex

一起使用。没用。更好的是，在布局方面，根本不要使用

float

您可以将容器上的

flex

与

justify content:space-between

一起使用

例如，我添加了

width:calc（50%-20px）

，这意味着它们之间将有40px的空间

见下文

.wrapper{
显示器：flex；
宽度：100%；
证明内容：之间的空间；
}
.项目{
高度：50px；
背景：红色；
宽度：计算（50%-20px）；
}

.DivA {
    height: 700px;
    float: left;
    width: flexbox keeps width at 100% of whatever space its allowed
}

.DivB {
    height: 700px;
    float: right;
}