Есть контейнер который содержит элементы(Может быть любое количество).Главное чтоб элементы переносились.
В примере 1 это реализовано. Но хотелось бы применить свойства флекс и для блоков внутри контейнера. Т.Е. блоки внутри контейнера должны иметь одинаковый размер заполнять всю ширину и высоту контейнера при этом если количество блоков больше чем может поместиться в контейнер то нужно блоки переносить.
В примере 1 реализовано так :
/* Common Styles */
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 50%;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
/* Flexbox Styles */
.content {
display: flex;
flex-wrap: wrap;
}
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
<div class="red">4</div>
<div class="green">5</div>
<div class="blue">6</div>
</div>
Как можно увидеть из примера, размер блоков внутри контейнера установлен в пикселях и процентах;
Меня интересует можно ли обойтись лишь свойствами flex(но чтоб соблюдался перенос как на примере 1) ?
Пример 2. Как я пытался решить эту проблему
.content div,
.content1 div,
.content2 div {
flex: 1;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
/* Flexbox Styles */
.content {
display: flex;
flex-wrap: wrap;
}
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
<div class="red">4</div>
<div class="green">5</div>
<div class="blue">6</div>
</div>
Как видно из примера 2 блоки не переносятся. Как можно решит данную проблему?
min-width
установить.