Загрузка...

Ебучий флексбокс

Тема в разделе Frontend создана пользователем zandrs54 18 июл 2024. 232 просмотра

Загрузка...
  1. zandrs54
    zandrs54 Автор темы 18 июл 2024 108 15 июн 2021
    Прошу помочь мне с моим говнокодом.
    Имеется некоторый div контейнер, в который входит заголовок и текст. У контейнера задан display: flex.
    [IMG]
    Какого то хуя блок с текстом не хочет выравниваться по центру.
    Можно конечно изменить жене ширину блока на 100%, и тогда текст будет центрироваться, но мне нужно четко ширину блока, что бы соответствовать референсу.

    вот сурсы этого момента
    HTML
    <div class="adv-description">
    <div class="adv-description__text">
    <header>New crypto finance app</header>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
    varius enim in eros elementum tristique. Duis cursus, mi quis viverra
    ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
    Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc
    ut sem vitae risus tristique posuere.
    </p>
    </div>
    <div class="adv-description__links">
    <div>
    <img src="content/icon.png" alt="" />
    <div>
    <head></head>
    <p></p>
    <a href=""></a>
    </div>
    </div>
    <div>
    <img src="content/icon.png" alt="" />
    <div>
    <head></head>
    <p></p>
    <a href=""></a>
    </div>
    </div>
    <div>
    <img src="content/icon.png" alt="" />
    <div>
    <head></head>
    <p></p>
    <a href=""></a>
    </div>
    </div>
    </div>
    </div>
    CSS
    .adv-description {
    justify-content: center;
    height: 744px;
    background-color: var(--blue_light);
    text-align: center;
    width: 100%;
    }
    .adv-description__text {
    flex-direction: row;
    }

    .adv-description__text header {
    margin-top: 180px;
    font-size: 40px;
    }
    .adv-description__text p {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    font-size: 18px;
    width: 699px;
    line-height: 2;
    }
    .adv-description__links {
    display: flex;
    }
    А вот еще видео с инспектора, где justify-content почему то не работает

     
  2. ASCII
    ASCII 18 июл 2024 297 4 фев 2024
     
    1. zandrs54 Автор темы
      там наследование было. На видео показано
  3. zandrs54
    zandrs54 Автор темы 18 июл 2024 108 15 июн 2021
    в любом случае, я уже решил проблему. Заменил флексбокс на блок
     
Top