Обновленный фрагмент

я есть довольно простая настройка сетки в flex, но недавно я наткнулся на недосмотр, который я сделал.

У меня есть столбцы с полем справа: 3em и flex-based: calc (33% - 3em).

Моя проблема в том, что 4-й и 5-й из них не выстраиваются в линию, пока не будет полный «ряд» из 3.

Любое понимание того, почему это происходит? Я предполагаю, что я могу усложнять вещи, как обычно.

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: 33%;
  flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  text-align: center;
}
<section>
  <div class="flex wrap">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

Codepen

Ответы на вопрос(2)

flex: 1, это заставит элемент занять все доступное пространство, что осталось послеflex-basis был отозван.

Что мешает двум последним элементам заполнить весь ряд, так этоmax-widthи с тех пор его значение шире, чемflex-basis, они будут расширяться до этого.

Либо удалитьflex: 1 изcolumnили используйте тот же калькулятор дляmax-width как используется дляflex-basis

Фрагмент стека

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: calc(33% - 3em);            /*  changed  */
  flex-basis: calc(33% - 3em);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  text-align: center;
}
<section>
  <div class="flex wrap">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

Обновлено на основе комментария

Если также сделать элементы равномерно распределенными внутри своего родителя, нужно разделить сумму фактического пространства поля / желоба / промежутка с количеством элементов.

Так что в этом случае это будет (2 пробела * 3em) / 3 элемента = 2em

Кроме того, нужно как можно ближе к 1/3, что может быть, например, 33,33333% или (100% / 3)

Фрагмент стека

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: flex;
}
.wrap {
  flex-wrap: wrap;
}
.column {
  flex: 1;
  flex-direction: column;
  margin-right: 3em;
}
.column:last-child {
  margin-right: 0;
}
.three {
  max-width: calc(33.33333% - 2em);            /*  changed  */
  flex-basis: calc(33.33333% - 2em);           /*  changed  */
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  margin-bottom: 3em;
  background-color: #ebf5fb;
  height: 3em;
  border: 1px dashed red;
  box-sizing: border-box;                      /*  added  */
  text-align: center;
}
.debug2 {
  border: 1px dashed red;                      /*  added  */
  box-sizing: border-box;                      /*  added  */
}
<section>
  <div class="flex wrap debug2">
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
    <div class="column three debug">3 Columns</div>
  </div>
</section>

 Kerrigan D07 нояб. 2017 г., 15:42
Я использовал этот метод ранее, но если вы посмотрите внимательно, столбцы на самом деле не занимают всю ширину контейнера.
 LGSon07 нояб. 2017 г., 16:50
@KerriganD Вы не просили об этом, вы спрашивали, как сделать, чтобы четвертый и пятый элементы выстраивались в очередь только из двух элементов в последнем ряду, поэтому я ожидаю, что вы также примете мой ответ, так как он решил это. Затем, исходя из того, что для удаления 3 или 6em из ширины не нужен собственный ответ, эточто был неправ, что имеет значение.

Моя математика была неверной.

Мне нужно было взять 100% -общее количество поля в ряду.

Вместо flex-base: calc (33% - 3em); это должно было быть гибким основанием: calc ((100% - 6em) / 3);

Обновленный фрагмент

*,
::before,
::after {
    background-repeat: no-repeat; /* 1 */
    box-sizing: inherit; /* 2 */
}

html {
    box-sizing: border-box; /* 1 */
    cursor: default; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
}

section {
  width: 1170px;
  margin: 0 auto;
  padding: 4em;
  background-color: lightgray;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 3em;
    /*overflow: hidden;*/
}
.column:last-child {
  margin-right: 0;
}
.three {
      max-width: calc( (100% - 6em) / 3);
      -ms-flex-preferred-size: calc( (100% - 6em) / 3);
          flex-basis: calc( (100% - 6em) / 3);
}
.three:nth-child(3n) {
  margin-right: 0;
}
.debug {
  background-color: #EBF5FB;
  margin-top: 1em;
  padding: .75em;
  text-align: center;
  border: 1px dashed #E8DAEF;
}
<section>
    <h2>Layout for 2 Dimensions</h2>
    <h3>Specific Widths (or not)</h3>
    <div class="flex wrap">
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
      <div class="column three debug">1/3 Columns</div>
       <div class="column three debug">1/3 Columns</div>
    </div>
  </section>

Ваш ответ на вопрос