• Страница 1 из 1
  • 1
Модератор форума: ABC  
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Автоматически настраиваемые поля и flex-элементы (Как это работает)
Автоматически настраиваемые поля и flex-элементы
ABCДата: Вс, 14.04.2019, 00:45 | Сообщение # 1
Offline
Допустим, у нас есть блок div, содержащий логотип сайта и пункты какого-то меню.

Код
<div class="banner">
    <p class="logo">Наша компания</p>
    <a href="#">Клиенты</a>
    <a href="#">О нас</a>
    <a href="#">Вакансии</a>
</div>


По-сути, это стандартная шапка сайта, логотип и пункты меню. Наша задача, разместить логотип сайта слева, а пункты меню - справа:



Как это сделать методами flex-вёрстки? Очень просто. Для начала зададим родительский flex-контейнер, для этого пропишем для блока div с классом banner:

Код
.banner {
  display: flex;
}


Теперь этот блок стал flex-контейнером, а все элементы внутри него - flex-элементами.
Теперь, чтобы логотип разместить в левой части, а ссылки меню в правой, нужно воспользоваться автоматически настраиваемыми полями, например так:

Код
.logo {
  margin-right: auto;
}


В результате поле справа от элемента с классом logo возьмёт себе размер свободного пространства в блоке и отодвинет ссылки в правый край контейнера.

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

Код
margin-left: auto;


всё свободное пространство в контейнере и станет полем слева от этой ссылки, отодвинув таким образом все ссылки вправо.
Прикрепления: 0839149.png(7.6 Kb)
 
профиль цитата изменить удалить
Форум » Cascading Style Sheets (CSS) » Верстка страниц с помощью CSS » Flexbox-вёрстка » Автоматически настраиваемые поля и flex-элементы (Как это работает)
  • Страница 1 из 1
  • 1
Поиск: