CSS - Flex элементы с полем справа

Question

Я хочу создать сетку из блоков, используя css flex.

Блоки должны быть в трех столбцах, и они должны быть на треть ширины родительского контейнера.

Моя проблема в том, что мне нужно правильное поле для блоков.

Блоки должны быть в процентах от контейнера, поэтому я не могу использовать пробел между ними.

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  //margin-bottom: 2px;
  width: 33.33%;
}

.block__item:nth-child(3n){
  margin-right: 0;
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

Answer 1

Может быть, вы можете просто уменьшить ширину блоков, а остальная часть остова присвойте это поле.

Как это:

.block__item {
    background: grey;
    height: 20px;
    margin-right: 3%;
    width: 30%;
}

Answer 2

Проблема заключается в заполнении контейнера. Но вы можете использовать width: calc((100% - 10px) / 3); для вычисления правильных 33,33% ширины контейнера без учета заполнения.

.block {
  border: 1px solid lightgrey;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: calc((100% - 10px) / 3);
}

.block__item:nth-child(3n){
  margin-right: 0;
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

Answer 3

Судя по вашему вопросу, я считаю, что это то, что вы пытаетесь достичь:

  .block {
  border: 1px solid lightgrey;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 5px;
  max-width: 900px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
   justify-content: space-between;
}

.block__item {
  background: grey;
  height: 20px;
  margin-right: 2px;
  margin-bottom: 2px;
  width: 33%;
}

<div class="block">
    <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
      <div class="block__item"></div>
    </div>

Я добавил префиксы вендора, чтобы он одинаково отображался во всех браузерах. Вы можете отрегулировать расстояние между полями, отрегулировав процент (то есть 31% ширины). Если вы планируете использовать Flexbox часто, вам следует зайти на этот сайт, чтобы узнать о быстрых версиях поставщиков: http://the -echoplex.net / flexyboxes /