Модуль Flexbox. Урок 2

Модуль Flexbox

От автора: В этом уроке мы продолжим изучение модуля CSS3 Flexbox. В предыдущем уроке мы затронули ключевое понятие данного модуля – понятие осей. В этом уроке мы более детально разберемся в вопросах работы с осями: для чего они нужны, как ими управлять, рассмотрим несколько новых свойств, позволяющих управлять осями и, соответственно, flex-элементами. Также мы узнаем несколько нюансов, о которых стоит помнить при работе с flex-версткой.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Итак, мы уже знаем, что Flex-контейнер оперирует двумя осями, согласно которым выстраиваются Flex-элементы: это главная ось и поперечная ось. Главная ось по умолчанию горизонтальна (ось X) и ее направление слева направо (языковая локаль ltr – left to right). Поперечная ось всегда перпендикулярна главной, т.е. по умолчанию она является вертикальной и идет сверху вниз.

Давайте попробуем начать управлять осями. За это отвечает свойство flex-direction. Вот его возможные значения:

row (по умолчанию): слева направо для ltr, справа налево для rtl;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

row-reverse: справа налево для ltr, слева направо для rtl;

column: аналогично row, сверху вниз;

column-reverse: аналогично row-reverse, снизу вверх.

Можем поиграться с данным свойством и его значениями, чтобы увидеть изменения в работе flex-элементов. Чтобы проще было следить за поведением элементов, давайте немного упростим итоговый вариант стилевого оформления из предыдущего урока. HTML будет таким:

И CSS:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Перейдем к следующему свойству — justify-content, позволяющему выровнять элементы относительно главной оси:

flex-start (по умолчанию): элементы сдвигаются к началу строки;

flex-end: элементы сдвигаются к концу строки;

center: элементы выравниваются по центру строки;

space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце);

space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки.

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

Ну и для более тонкого управления элементами, мы можем воспользоваться еще одним свойством — align-items, позволяющим управлять выравниванием элементов относительно поперечной оси:

flex-start: граница cross-start для элементов располагается на позиции cross-start;

flex-end: граница cross-end для элементов располагается на позиции cross-end;

center: элементы выравниваются по центру поперечной оси;

baseline: элементы выравниваются по своей базовой линии;

stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width).

На этом текущий урок завершен. В следующем уроке мы продолжим изучение модуля Flexbox. Удачи и до новых встреч!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Леонид

    Знак вопроса в краткой записи flex если я правильно понял — это указание на то, что если значение не будет явно указано (будет пропущено) то браузер верно интерпретирует оставшиеся.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree