Как сверстать такой футер с помощью флексов?

Question

Хотелось бы понять как решить такую казалось бы тривиальную задачу как верстка данного футера. Я так понял нужно разделить его на footer__top и footer__bottom, но как распределить нижнюю часть? Ведь justify-content тут точно не поможет, так как распределение тут не ровное.

Answer 1

Дату и политику оберни еще в один div :) и внутри этого div пропиши margin нужный или этому div назначь еще display: flex и распредели его с помощью justify-content, ну и соответственно останется общему bottom тоже justify-content прописать.

Answer 2

.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #ccc;
}

.footer__wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 250px;
}

.footer__item {
  font-size: 12px;
}

<footer class="footer__bottom">
    <div class="footer__wrapper">
        <div class="footer__item">2010</div>
        <div class="footer__item">Политика конфиденциальности</div>
    </div>

    <div class="footer__item">Создание сайтов</div>
</footer>

БЛОГ НА HUSL

Как сверстать такой футер с помощью флексов?

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