Flex-Basis для обертывания колонн

Kerrigan D спросил: 13 октября 2017 в 07:30 в: css

У меня есть довольно базовая настройка сетки в 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

0 ответов