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

Модуль Flexbox

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

автор

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

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

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

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

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

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

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

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

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

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

<div class="wrap">
	<div class="block block1">Block 1</div>
	<div class="block block2">Block 2</div>
	<div class="block block3">Block 3</div>
</div>

И CSS:

*{
	margin: 0;
	padding: 0;
}
.wrap{
	display: flex;
	flex-direction: row; /* значение по умолчанию */
	height: 500px;
	width: 500px;
	border: 1px solid #ccc;
	margin: 20px auto;
}
.block{
	background: #26a082;
	color: #fff;
	font-size: 20px;
	border: 1px solid #ccc;
}

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

Перейдем к следующему свойству — 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 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

  1. Леонид

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree