Использование маржи на гибких элементах

У меня сложилось впечатление, что для flex-элементов/дочерних элементов можно добавить поле, и flexbox должен автоматически учесть это и вычислить правильное расстояние между элементами.

Я не могу заставить это работать так, как хотелось бы.

Скрипка здесь: https://jsfiddle.net/dba5ehcw/1/

.flex-item{
    border: 1px solid blue;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
}

Таким образом, каждый элемент flex на данный момент составляет половину ширины контейнера, и они хорошо сочетаются друг с другом.

Я хотел бы иметь возможность добавить запас, скажем, 1em к элементам flex, чтобы дать им некоторое пространство для дыхания, но при этом они становятся больше 50% и больше не укладываются рядом друг с другом на та же линия, потому что они слишком широки.

Есть ли способ использовать поле на flex-элементах, чтобы контейнер flexbox учитывал это и соответственно корректировал (уменьшал) их ширину?

Ответ 1

Вам нужно сделать это с заполнением - которое, когда в режиме border-box не делает контейнер больше, чем указанная ширина - не маржа, и вложенный div flex. Так работают все системные системы на основе flexbox. Код ниже:

.flex-container{
    border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 320px;
}

.flex-item{
    padding:1em;
    box-sizing: border-box;
    height: 160px;
    width: 50%;
    display:flex;
}

.flex-item>div {
    border: 1px solid blue;
    flex: 1 1 auto;
}

<div class="flex-container">
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
    <div class="flex-item"><div></div></div>
</div>

Ответ 2

Существует несколько способов сделать это:

Используйте calc:

.flex-item {
  width: calc(50% - 2em);
  margin: 1em;
}

.flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}
.flex-item {
  border: 1px solid blue;
  box-sizing: border-box;
  height: calc(160px - 2em);
  width: calc(50% - 2em);
  margin: 1em;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Ответ 3

Попробуйте это: -

.flex-container {
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
}

.flex-item {
  justify-content: space-around;
  margin: 1%;
  background: red;
  border: 1px solid blue;
  box-sizing: border-box;
  height: 160px;
  width: 48%;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>