как распределить div с помощью флекс

Question

всем привет есть такой макет. как с помощью флексов задать такое распределение? или какой метод посоветуете?

.start {
    padding: 72px 0;
    }
.start__cards {
        display: flex;
    }
.start__cards-item {
        background-color: #fff;
        box-shadow: 0px 4px 100px rgba(208, 218, 227, 0.57);
        border-radius: 20px;
        padding: 32px;
    }

<div class="start__cards">
                        <div class="start__cards-item">
                            <p class="start__cards-num">1</p>
                            <p class="start__cards-title">Регистрация</p>
                            <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                        </div>
                        <div class="start__cards-item">
                            <p class="start__cards-num">1</p>
                            <p class="start__cards-title">Регистрация</p>
                            <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                        </div>
                        <div class="start__cards-item">
                            <img src="images/svg/start_card.svg" alt="">
                            <p class="start__cards-num">1</p>
                            <p class="start__cards-title">Регистрация</p>
                            <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                        </div>
                        <div class="start__cards-item">
                            <p class="start__cards-num">1</p>
                            <p class="start__cards-title">Регистрация</p>
                            <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                        </div>
                    </div>

Answer 1

Добавьте враппер для двух первых карточек.

.start {
    padding: 72px 0;
    }
.start__cards {
        display: flex;
    }
.start__cards-item {
        background-color: #fff;
        box-shadow: 0px 4px 100px rgba(208, 218, 227, 0.57);
        border-radius: 20px;
        padding: 32px;
    }
    
.start__cards-item:last-child { /*Последний потомок класса выравнивается по началу флекса*/
  flex-grow: 0;
  align-self: flex-start;
}

<div class="start__cards">
                        <div> <!-- враппер -->
                           <div class="start__cards-item">
                              <p class="start__cards-num">1</p>
                              <p class="start__cards-title">Регистрация</p>
                              <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                          </div>
                          <div class="start__cards-item">
                              <p class="start__cards-num">1</p>
                              <p class="start__cards-title">Регистрация</p>
                              <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                          </div>
                        </div><!-- враппер -->
                        <div class="start__cards-item">
                            <img src="images/svg/start_card.svg" alt="">
                            <p class="start__cards-num">1</p>
                            <p class="start__cards-title">Регистрация</p>
                            <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                        </div>
                        <div class="start__cards-item">
                            <p class="start__cards-num">1</p>
                            <p class="start__cards-title">Регистрация</p>
                            <p class="start__cards-text">Заполните простую форму для участия в программе и активируйте клиентский пакет.</p>
                        </div>
                    </div>

Answer 2

Попробуйте вариант с сеткой

 * {
        box-sizing: border-box;
      }
      .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -30px;
        margin-right: -30px;
        margin-bottom: -15px;
      }

      .col-4 {
        width: 33.3%;
        margin-bottom: 15px;
        padding-left: 15px;
        padding-right: 15px;
      }

      .start__cards-item {
        background-color: #fff;
        box-shadow: 0px 4px 100px rgba(208, 218, 227, 0.57);
        border-radius: 20px;
        padding: 32px;
      }

      .start__cards-item + .start__cards-item {
        margin-top: 15px;
      }

 <div class="row">
      <div class="col-4">
        <div class="start__cards-item">
          <p class="start__cards-num">1</p>
          <p class="start__cards-title">Регистрация</p>
          <p class="start__cards-text">
            Заполните простую форму для участия в программе и активируйте
            клиентский пакет.
          </p>
        </div>
      </div>
      <div class="col-4">
        <div class="start__cards-item">
          <p class="start__cards-num">1</p>
          <p class="start__cards-title">Регистрация</p>
          <p class="start__cards-text">
            Заполните простую форму для участия в программе и активируйте
            клиентский пакет.
          </p>
        </div>
        <div class="start__cards-item">
          <img src="images/svg/start_card.svg" alt="" />
          <p class="start__cards-num">1</p>
          <p class="start__cards-title">Регистрация</p>
          <p class="start__cards-text">
            Заполните простую форму для участия в программе и активируйте
            клиентский пакет.
          </p>
        </div>
      </div>
      <div class="col-4">
        <div class="start__cards-item">
          <p class="start__cards-num">1</p>
          <p class="start__cards-title">Регистрация</p>
          <p class="start__cards-text">
            Заполните простую форму для участия в программе и активируйте
            клиентский пакет.
          </p>
        </div>
      </div>
    </div>

БЛОГ НА HUSL

как распределить div с помощью флекс

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