1

Как разместить указанный текст во флекс контейнере так, чтобы он выстраивался ровно по сравнению с другими контейнерами в зависимости от размера заголовка?

введите сюда описание изображения

 <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>






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

    margin-bottom: 85px;
}

.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: 1 1 auto;

    font-family: PT Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
    color: #333333;

    max-width: 201px;

    margin-top: 48px;
    margin-bottom: 16px;
}

.why__element-text {
    flex: 0 1 auto;

    font-family: PT Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 23px;
    text-align: center;
    color: #333333;

    max-width: 245px;
}

.why__element {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 245px;
    margin-bottom: 70px;
    margin-right: 143px;
    height: 100%;
}

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

.why__comment {
    display: flex;
    justify-content: space-around;
    background: #FAFAFA;

    margin-bottom: 68px;
}

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

.we-3, .we-5 {
    margin-right: 0;
}
1
  • общий родитель с display:flex и align-items:center
    – Armen
    1 дек 2020 в 4:34

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.