CSS flex и пробел между динамическими

Question

Прямо сейчас мой код показывает 4 столбца div.Каждый div имеет ширину 47%.Если у вас есть только 2 столбца, то он отлично работает.

Но если у вас есть 4 столбца, как вы можете сделать так, чтобы в строке было 2 деления, не закрывая «flex» и открывая другой"flex" div?

Что если у меня есть 12 div столбцов, как я могу сделать это динамически, если в строке только 2 div?

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: space-between;
}
.column {
    padding: 10px;
    border: 1px solid red;

    width: 47%;
}

<div class="flex">
    <div class="column">Hi</div>
    <div class="column">Hi</div>

    <div class="column">Hi</div> <!-- This should be a new row... -->
    <div class="column">Hi</div>
</div>

Вот пример: https://jsfiddle.net/htf931bq/

Answer 1

Я получил ответ ...

Я просто добавил flex-wrap: wrap; к классу flex следующим образом:

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

Answer 2

Вы должны установить размер для обертки, чем дать всем столбцам гибкий изгиб на 47% и добавить атрибут обертки в контейнер:

fiddle

.flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    flex-wrap: wrap;
}

.column {
    padding: 10px;
    border: 1px solid red;
    flex: 0 0 47%;  
}

<div class="flex">
<div class="column">Hi</div>
<div class="column">Hi</div>

<div class="column">Hi</div> <!-- This should be a new row... -->
<div class="column">Hi</div>

Answer 3

Вы можете добавить:

.flex {
    flex-wrap: wrap;
    flex-direction: row;
}

Так что теперь у вас будет 2 столбца, каждый шириной 47%.Но вам нужно добавить медиа-запрос, чтобы сделать его удобным для мобильных устройств.

Добавить этот медиа-запрос:

@media only screen and (max-width: 600px) {
    .column {
         width: 100%;
    }
}