Как позиционировать большое количество элементов с помощью flexbox не прибегая к position: absolute?

Question

Делаю лэндинг для отработки технологии flexbox. Столкнулся с проблемой: не могу понять, как позиционировать большое количество элементов не прибегая к костылям вроде того, что я изобразил на втором изображении, а также не прибегая к position:absolute, т.к. будут неточности в отступах или придется эти отступы очень долго высчитывать.

Прикрепил два изображения. На первом дан элемент, который мне нужно сделать.

На втором я указал, каким я вижу один из рабочих вариантов реализации: организовать в footer две колонки и сделать в них display:flex, flex-direction: column. Но, как я говорил ранее, этот вариант мне видится "костыльным", т.к. нарушается БЭМ.

А вот html код, который у меня имеется. Можно не обращать внимания на ЛОГО, направьте, как сделать текстовые блоки по flexbox и без костылей, по ним я уже сориентируюсь:

            <footer class="footer">
                <div class="footer__logo">
                    <img src="icons/Logo.svg" alt="logo" class="logo__img">
                    <p class="logo__text"> PETWORLD </p>
                </div>
                <div class="footer__input">
                    <label for="email" class="text">Updates right to your Inbox</label>
                    <input type="email" placeholder="Email Address" class="text">
                    <input type="submit" value="Send" class="submit__text text">
                </div>

                <div class="footer__privacy">
                    <p class="privacy__text"> Text</p>
                    <p class="privacy__text"> Text</p>
                    <p class="privacy__text"> Text</p>
                </div>

                <div class="footer__menu">
                    <!-- x3 колонки текста -->
                    <div class="menu__text">
                        <p class="text">Text</p>
                        <p class="text">Text</p>
                        <p class="text">Text</p>
                    </div>
                </div>

                <div class="footer__social">
                    <img src="icons/Socials icons.svg" alt="" class="logo__img">
                </div>
            </footer>```

Answer 1

Я решил немного отойти от бэм и разделил свой футер на две визуальных составляющих. Что вышло в итоге можно посмотреть ниже:

Что вышло в итоге можно посмотреть на codepen или в коде ниже: https://codepen.io/productomar/pen/ZEvNQjG

------------------HTML---------------------

<div class="container__footer">
        <footer class="footer">
            <div class="first__half">
                <div class="footer__logo">
                    <img src="icons/Logo.svg" alt="logo" class="logo__img">
                    <p class="logo__text"> PETWORLD </p>
                </div>

                <div class="footer__input">
                    <label for="email" class="text">Updates right to your Inbox</label>
                    <input type="email" placeholder="Email Address" class="placeholder__text">
                    <input type="submit" value="Send" class="submit__text text">
                </div>

                <div class="footer__privacy">
                    <p class="privacy__text"> © PETWORLD 2022</p>
                    <p class="privacy__text"> Privacy policy</p>
                    <p class="privacy__text"> Terms of use</p>
                </div>
            </div>
            <div class="second__half">
                <div class="footer__menu">
                    <div class="menu__text">
                        <p class="text menu__b" style="font-weight: 600;">Our story</p>
                        <p class="text__item text">FAQ</p>
                        <p class="text__item text">Contact</p>
                    </div>
                    <div class="menu__text">
                        <p class="text menu__b" style="font-weight: 600;">Pet care</p>
                        <p class="text__item text">Treatments</p>
                        <p class="text__item text">Health</p>
                        <p class="text__item text">Hygiene </p>
                    </div>
                    <div class="menu__text">
                        <p class="text menu__b" style="font-weight: 600;">Shop</p>
                        <p class="text__item text">Pet Food</p>
                        <p class="text__item text">Toys</p>
                        <p class="text__item text">Accessories</p>
                    </div>
                </div>

                <div class="footer__social">
                    <img src="icons/Socials icons.svg" alt="logo__social" class="logo__social">
                </div>
            </div>
        </footer>
    </div>

------------------CSS---------------------

    /* Первая часть футера */
.first__half {
    display: flex;
    flex-direction: column;
}

.footer {
    display: flex;
    padding: 70px 80.5px;
}

.footer__logo {
    display: flex;
    align-items: center;
}

.logo__text {
    font-weight: bold;
}

.footer__input {
    margin-top: 75px;
}

label {
    display: block;
}

input[type="email"] {
    border: 1px solid #D0D0D0;
    border-radius: 10px;
    margin-top: 12px;
}

.placeholder__text {
    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 20px;
    padding-right: 71px;
    font-size: 18px;
    color: #2D2D2D;
}

.submit__text {
    padding: 11px 31.5px;
    background-color: #3366FF;
    color: white;
    border-radius: 10px;
    margin-left: 20px;
}

.footer__privacy {
    display: flex;
    margin-top: 33px;
}

.privacy__text {
    margin-right: 30px;
    font-weight: 600;
}

.privacy__text:nth-child(3) {
    margin-right: 0px;
}
/* Вторая часть футера */

.second__half {
    margin-left: 233px;
}

.footer__menu {
    display: flex;
}

.menu__text {
    margin-right: 60px;
}

.text__item {
    padding-top: 16px;
}

.menu__text:nth-child(3) {
    margin-right: 0px;
}

.footer__social {
    margin-top: 99px;
}

.logo__social {
    margin-left: 237px;
}

БЛОГ НА HUSL

Как позиционировать большое количество элементов с помощью flexbox не прибегая к position: absolute?

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