Как максимально правильно и гибко разместить flex элементы?

Помогите правильно и гибко разместить флекс элементы. Нужно разместить два нижних блока посредине. Но для родительского контейнера прописано justify-content: space-between;, как это можно реализовать? введите сюда описание изображения

.why {
  background: linear-gradient(180deg, #E6E6E6 0%, rgba(255, 255, 255, 0) 100%);
}

.why__body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.why__wrapper {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
}

.we-1,
.we-2,
.we-3 {
  flex: 1 1 33.333%;
}

.we-4,
.we-5 {
  flex: 1 0 50%;
}

.why__item-title {
  font-family: PT Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 25px;
  color: #333333;
  margin-bottom: 16px;
}

.why__item-text {
  font-family: PT Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 25px;
  color: #333333;
}

.why-title {
  font-family: Oswald;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 60px;
  color: #333333;
  margin-bottom: 45px;
}

.why__image {
  display: flex;
  justify-content: center;
  width: 132.2px;
  height: 132.2px;
  background: #E84A55;
  box-shadow: 0px 4px 45px rgba(232, 74, 85, 0.51);
  transform: rotate(45deg);
}

.why__image img {
  transform: rotate(-45deg);
}

.why__element-title {
  flex: 0 0 auto;
  font-family: PT Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 27px;
  color: #333333;
  max-width: 201px;
  margin-bottom: 18px;
}

.why__element-text {
  flex: 1 0 auto;
}
<div class="container">
  <div class="why__wrapper">
    <div class="title why-title">Чому саме ми?</div>
    <div class="why__body">
      <div class="why__element we-1">
        <div class="why__image"><img src="img/why/whyelement/1.svg" alt=""></div>
        <div class="title why__element-title">Економія часу</div>
        <div class="text why__element-text">поки ми займаємось бухгалтерією, Ви тим часом розвиваєте свій бізнес</div>
      </div>
      <div class="why__element we-2">
        <div class="why__image"><img src="img/why/whyelement/2.svg" alt=""></div>
        <div class="title why__element-title">Фіксована вартість</div>
        <div class="text why__element-text">вартість послуг у процесі не підвищується</div>
      </div>
      <div class="why__element we-3">
        <div class="why__image"><img src="img/why/whyelement/3.svg" alt=""></div>
        <div class="title why__element-title">Досвід роботи</div>
        <div class="text why__element-text">з іноземними інвесторами та представництвами іноземних підприємств в Україні</div>
      </div>
      <div class="why__element we-4">
        <div class="why__image"><img src="img/why/whyelement/4.svg" alt=""></div>
        <div class="title why__element-title">Кваліфікована команда</div>
        <div class="text why__element-text">поки ми займаємось бухгалтерією, Ви тим часом розвиваєте свій бізнес</div>
      </div>
      <div class="why__element we-5">
        <div class="why__image"><img src="img/why/whyelement/5.svg" alt=""></div>
        <div class="title why__element-title">Результативність</div>
        <div class="text why__element-text">ми оріентовані на результат</div>
      </div>
    </div>
  </div>
</div>


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