Гибкое обтекание предметов даже с помощью рамки

Question

В моем коде ниже, когда я добавляю заполнение, оно должно увеличиваться в ширину, так как я использую border-box. Но это не работает, почему? Кто-нибудь может мне помочь.

Если я добавлю поле или отступ, мой child__wrapper будет переведен в новую строку, почему?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%;
}

.child__wrapper {
  height: 300px;
  flex: 0 0 33.3%;
  margin: 10px;
  box-sizing: border-box;
  background: rebeccapurple;
}

<div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div>

Answer 1

Имейте в виду, что box-sizing: border-box вносит отступы и границы в вычисление ширины / высоты, , но не поля .Поля всегда рассчитываются отдельно.

Свойство box-sizing принимает два значения:

• content-box
• border-box

Не предлагает padding-box или margin-box.

Учитывайте эти термины при обращении к CSS Box Model .

^{источник: W3C}

Поэтому при установке ширины элемента на 33,3%и добавляем поля в 10px справа и слева, возникает условие переполнения, в результате чего третий элемент оборачивается.

33.3% + 33.3% + 33.3% + 10px + 10px + 10px + 10px + 10px + 10px > 100%

Вместо этого попробуйте это на элементах:

flex: 1 0 26%

Это сокращенное правило сводится к следующему:

• flex-grow: 1
• flex-shrink: 0
• flex-basis: 26%

С flex-grow: 1 нет необходимости, чтобы flex-basis составлял 33,3%.

Поскольку flex-grow будет занимать свободное место в строке, flex-basis должно быть достаточно большим, чтобы обеспечить перенос.

В этом случае при flex-basis: 26% в строке может существовать максимум три элемента,для полей достаточно места, и flex-grow заполняет все пробелы.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.child__wrapper {
  flex: 1 0 26%;
  margin: 10px;
  height: 300px;
  box-sizing: border-box;
  background: rebeccapurple;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div>