Цель: блок из 5 карточек (
div.block), 2 из которых сверху (по 50% ширины контейнера
div.two) и 3 снизу (по 33% ширины контейнера
div.three). С gap в 12 пикселей.
Что не получается: карточки ведут себя как column, т. е. становятся не в один ряд, а друг под другом. Не могу найти причину. В другом аналогичном случае (все блоки равной ширины) всё как надо. Заранее спасибо)).
HTML:<div class="wrap">
<div class="two">
<a class="block">
<div class="case1">
</div>
<div class="case2">
</div>
</a>
<a class="block">
<div class="case1">
</div>
<div class="case2">
</div>
</a>
</div>
<div class="three">
<a class="block">
<div class="case1">
</div>
</a>
<a class="block">
<div class="case1">
</div>
</a>
<a class="block">
<div class="case1">
</div>
</a>
</div>
</div>
CSS:.two, .three {
display: flex; width: 100%;
flex-flow: row wrap; justify-content: space-between;
}
.two .block, .three .block {
display: block;
}
.two { margin: 0 0 12px 0; }
.three { margin: 12px 0 0 0; }
.two .block { width: calc(50% - 6px); height: 256px; }
.three .block { width: calc((100% / 3) - 8px); height: 172px; }
Средний
