Как реализовать данное расположение карточек?

Question

без доп оберток расположения итемов

Answer 1

Делал через конструктор, так что могут быть лишние стили, но суть понятна:

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;

    }
.flex-item{
    background: red;
    text-align: center;
    margin: 2%;
    height: 50px;
    line-height: 50px;
    }
.flex-item:nth-child(6) {
    flex: 1 1 100%;
    }

.flex-item:nth-child(1) {
    flex: 1 1 45%;
    }

.flex-item:nth-child(2) {
    flex: 1 1 45%;
    }

.flex-item:nth-child(4) {
    flex: 1 1 25%;
    }

.flex-item:nth-child(3) {
    flex: 1 1 25%;
    }

.flex-item:nth-child(5) {
    flex: 1 1 25%;
    }

<div class = 'flex-container'>
<div class = 'flex-item'>1</div>
<div class = 'flex-item'>2</div>
<div class = 'flex-item'>3</div>
<div class = 'flex-item'>4</div>
<div class = 'flex-item'>5</div>
<div class = 'flex-item'>6</div>
</div>

БЛОГ НА HUSL

Как реализовать данное расположение карточек?

Ответы (1 шт):