Flexbox не может делать то, что ты ищешь. Ты мог бы делать что-то похожим способствуя тому, чтобы первая статья заняла больше, но никогда он не будет точно в двойной порции в оставшуюся часть. Кроме которого не были бы плавающими элементы.
ты Можешь делать доказательства с flexbox: FlexyBoxex
Главный выбор - с системой grid (bootstrap или другой). Но это не значит, что ты не можешь делать это с твоим собственным CSS:
Идея - это достаточно основная, распределять общий класс для всех статей в том, который дает ему размер / цвет и общие стили:
.bg-black {
background-color: black;
width: calc(20% - 20px);
margin: 10px;
height: 20vh;
float:left;
}
Распределять ему div
, которые - двойная порция размера класс, чтобы менять ему размер в двойную порцию:
.double {
width: calc(40% - 20px);
height: calc(40vh + 20px);
}
Snipet
.container {
width: 100%;
}
.bg-black {
background-color: black;
width: calc(20% - 20px);
margin: 10px;
height: 20vh;
float:left;
}
.double {
width: calc(40% - 20px);
height: calc(40vh + 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="double bg-black col-4"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
<div class="bg-black col-2"></div>
</div>