У меня есть 5 divs
, который я бы хотел выровнять, используя 3 строки и столбца, например:
| ОО |
| ОО |
| O |
Я новичок в flexbox, похоже, я не могу обернуть свои дивы. Похоже, они центрированы внутри моего родительского контейнера div в следующем порядке:
| O |
| O |
| O |
| O |
| O |
Я хочу, чтобы innerContainer
переносился на следующую строку после размещения двух div.
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 20px;
}
.containerBody {
padding-top: 20px;
width: 75%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.innerContainer {
width: 30%;
min-width: 30%;
height: 185px;
flex: 1;
box-sizing: border-box;
}
<div class="container">
<!-- text -->
<div class="containerBody">
<!-- text -->
<a>
<div class="innerContainer">
O
</div>
</a>
<a>
<div class="innerContainer">
O
</div>
</a>
<a>
<div class="innerContainer">
O
</div>
</a>
<a>
<div class="innerContainer">
O
</div>
</a>
<a>
<div class="innerContainer">
O
</div>
</a>