Как настроить ширину реагирующих элементов сетки flexbox, чтобы между ними было свободное пространство?

Question

Проблема, с которой я столкнулся, должна быть достаточно простой, но я недостаточно разбираюсь во 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>

и css:

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

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

Я могу настроить поля, но он перемещает другой div ниже первого. Я могу настроить все остальные свойства, кроме ширины. Я хочу, чтобы у div'ов было пространство между ними, но все, что я пробовал, работает.

Я понятия не имею, откуда берется это свойство и даже помещает! Важный в CSS ничего не делает.

Редактировать: Нашли обходной путь, изменив lg = {2.5} в DivA и добавив поле слева в DivB, но мне все еще интересно, есть ли лучший способ ..

Answer 1

Не используйте float вместе с flex.Это бесполезно.Еще лучше, не используйте float вообще, когда дело доходит до макета.

Вы можете использовать flex на контейнере вместе с justify-content: space-between.

в качестве примера. Я добавил width: calc(50% - 20px), что означает, что между ними будет пробел в 40 пикселей.

См. Ниже

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