<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Flex блоки на примере шапки

Flex блоки на примере шапки

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

Суть работы flex блоков

Главная и поперечная ось имеют свои размеры и они могут меняться друг с другом местами. Если вы держите шашлык горизонтально в процессе нанизывания мяса, то главная ось принимает горизонтальное положение (flex-direction: row). А когда приготовленный шашлык переворачивают острием вниз, чтобы отправить кусочки мяса в тарелку, то главная ось (шампур) принимает вертикальное положение (flex-direction: column). На способности перестраивания flex-элементов из горизонтального положения (row), в вертикальное (column) и построена адаптивность сайта.

Пока ширина экрана (десктопы) у пользователя позволяет адекватно показывать все элементы в ряду, у flex-контейнера по умолчанию выставлено свойство flex-direction: row. Но как только ширина экрана (смартфоны) уменьшается и flex-элементы перестают помещаться в одном ряду, тогда на нужной контрольной точке, мы меняем ориентациию главной оси (переворачиваем шампур вниз) и элементы перестраиваются в колонку (flex-direction: column).

Flex-контейнер является родителем для flex-элементов и к нему может применяться только одна часть CSS свойств. Для дочерних flex-элементов предназначена другая часть CSS свойств.

Свойства для контейнера

  • justify-content отвечает за расположение элементов по основной оси
  • align-items вытягивает элементы вдоль основной оси
  • align-content вытягивание элементов по вспомогательной оси

Свойства для элементов

  • order меняет порядок расположения элементов прямо в CSS стилях, не касаясь HTML разметки.
  • flex-grow отвечает за растягивание отдельного элемента (жадность). Можно растянуть отдельный элемент внутри flex блока, при условии наличия свободного места.
  • flex-shrink наоборот ужимает элемент, когда недостаточно места внутри flex-контейнера.
  • flex-basic - это некий аналог ширины и высоты в зависимости от направления основной оси. Для горизонтального направления flex-basic отвечает за ширину, а для вертикального - за высоту.
  • flex укороченная запись для flex-grow, flex-shrink и flex-basic.
  • align-self выравнивает отдельно взятый элемент

Рассмотрим на конкретном примере, как применять технологию flex блоков для адаптивной верстки шапки сайта. Узнаем, как правильно использовать основные свойства flex блоков.

Шапка (логотип + меню)

Семантический тег header говорит, что перед нами шапка сайта, назначим его flex-контейнером. Внутри которого у нас будет два flex-элемента: логотип и меню навигации. Обернем логотип в обертку с классом wrap-logo для управляемости. Сделаем так же и для пунктов меню li, тег nav будет служить для них оберткой.

     <header>
  <div class="wrap-logo">
    <img src="logo.jpg" alt="">
  </div>
  <nav>
    <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#services">Услуги</a></li>
        <li><a href="#contact">Контакты</a></li>
        <li><a href="#about">О нас</a></li>
    </ul>
  </nav>
</header>

Оба элемента будут находиться в ряду, поэтому достаточно контейнеру задать display: flex. Свойство flex-direction: row; прописывать необязательно, так как оно идет по умолчанию для горизонтального направления главной оси. Как мы хотим расположить элементы вдоль главной оси? Предположим что в макете для верстки: логотип прибит к левому краю, а меню к правому. Свойства justify-content отвечает за выравнивание элементов (логотипа и навигации) вдоль главной оси. Если мы выберем значение space-between, то первый и последний элементы прибьются к краям контейнера. Тогда остальные элементы, если таковые имеются, равномерно распределят между собой все свободное постранство.

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

  • по верхнему краю
  • по нижнему краю
  • по центру
  • по базовой линии

В данном примере, мы выровняли логотип и меню по центру.

// flex-контейнер
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Обертки nav и wrap-logo в свою очередь служат flex-контейнерами для логотипа и пунктов меню.

// flex-контейнер + flex-элемент
.wrap-logo {
    display: flex;
}

Ссылки меню расположены в ряд.

// flex-контейнер + flex-элемент
nav ul {
    display: flex;
    align-items: center;
}

Совет

Наша шапка смотрится хорошо при минимальном разрешении экрана в 486 пикселей. Если поставлена задача, адаптировать сайт для ещё меньших экранов, то целесообразнее всего будет скрыть меню за кнопкой гамбургер.

Flex блоки на примере шапки.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.