How to adjust the width of react flexbox grid items to allow space between them?

Question

The problem I have should be simple enough to solve, but I don't understand flexbox enough to understand what is happening.

I am trying to get two divs side by side with some space between them, but I cannot adjust their widths at all.

The html(jsx) code looks like this:

        <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>

And the css:

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

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

I can adjust the margins, but it moves the other div below the first one. I can adjust all the other properties, except the width. I want the divs to have space between them but nothing I have tried works.

I have no idea where this property is coming from and even putting !important in the css does nothing.

Edit: Found a workaround by changing lg={2.5} in DivA and adding a margin-left in DivB, but i am still wondering if there is a better way..

score 2 · Answer 1 · answered May 13 '19 at 11:57

Do not use float together with flex. It's useless. Better yet, do not use float at all when it comes to layout.

You can use flex on the container together with justify-content: space-between.

for example purposes i added width: calc(50% - 20px) which means that there will be 40px space between them.

See below

.wrapper {
  display:flex;
  width: 100%;
  justify-content: space-between;
}

.item {
  height:50px;
  background: red;
  width:calc(50% - 20px);
}

<div class="wrapper">
  <div class="a item">
  </div>
  <div class="b item">
  </div>
</div>

How to adjust the width of react flexbox grid items to allow space between them?

1 Answers1