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

Модуль Flexbox

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

автор

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

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

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

Итак, прежде всего, термин Flexbox – это сочетание двух слов: flexible box — «гибкий блок». И это действительно гибкий блок, поскольку управление им гораздо гибче, в отличие от стандартного блока. Чтобы оценить возможности Flexbox’a, достаточно попробовать решить с его помощью классическую задачу по созданию колонок одинаковой высоты, но с различным содержимым. Средствами Flexbox эта задача решается буквально использованием одного-двух свойств модуля Flexbox.

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

Для начала познакомимся с двумя необходимыми понятиями: Flex-контейнер и Flex-элемент. Flex-контейнер – это родительский блок, который мы и наделяем свойством гибкости (flex). Ну а Flex-элемент – это дочерний элемент Flex-контейнера. Соответственно, часть свойст модуля Flex применима к контейнеру, а часть – к элементам внутри него.

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

На данной схеме мы видим 2 оси: ось X и ось Y. По умолчанию ось X является главной осью, а ось Y – поперечной. Вдоль этих осей и происходит выстраивание элементов, а также управление ими. Также мы можем изменить порядок осей, сделав ось Y главной, а ось X – поперечной. Выстраивание элементов происходит в привычном нам порядке: слева направо и сверху вниз. При этом мы также можем изменять этот порядок. К слову, как говорилось выше, Flexbox учитывает языковую локаль и изменит порядок при необходимости самостоятельно.

Теперь давайте приступим к практике. Создадим простенькую разметку:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flexbox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
<div class="wrap">
	<div class="block block1">Block 1</div>
</div>

</body>
</html>

И добавим несколько стилевых правил:

.wrap{
	border: 1px solid #000;
}
.block{
	background: #26a082;
	color: #fff;
	font-size: 20px;
	border: 1px solid #ccc;
}

Сейчас данный блок (с классом block) ведет себя, как обычный блок: занимает всю ширину и необходимую для его контента высоту. Теперь попробуем сделать его Flex-элементом. Для этого нам необходимо сначала организовать Flex-контейнер, которым будет выступать обертка (блок с классом wrap). Добавим необходимое правило к данному блоку:

.wrap{
	border: 1px solid #000;
	display: flex;
}

Свойство display со значением flex позволяет назначить Flex-контейнер. В результате данного действия наш блок (с классом block) стал занимать только необходимую ему ширину и всю доступную высоту родителя (Flex-контейнера). Поскольку блок растягивается по высоте, полагаю, вы уже увидели плюсы использования модуля Flex, — мы уже можем без проблем организовать колонки одинаковой высоты, использовав при этом всего одно свойство. Давайте попробуем добавить еще несколько колонок в верстку, чтобы убедиться в этом:

<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>

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

*{
	margin: 0;
	padding: 0;
}
html, body{
	height: 100%;
}
.wrap{
	/*border: 1px solid #000;*/
	display: flex;
	height: 100%;
}
.block{
	background: #26a082;
	color: #fff;
	font-size: 20px;
	border: 1px solid #ccc;
}

В результате все три колонки растянулись по всей высоте экрана. Однако по умолчанию колонки не тянутся по ширине, а занимают только необходимую для показа контента ширину. Давайте устраним этот недостаток и познакомимся с тремя свойствами Flex-элементов:

flex-grow — определяет для flex-элемента возможность «вырастать» при необходимости (значение по умолчанию — 0). Является чем-то вроде пропорции, позволяющей задавать долю ширины элемента по отношению к другим элементам (возможность занимать бОльшую долю свободного пространства);

flex-shrink — определяет для flex-элемента возможность сжиматься при необходимости (значение по умолчанию — 1);

flex-basis — определяет размер по умолчанию для элемента (значение по умолчанию — auto).

Для указанных трех свойств имеется сокращенная запись со значениями по умолчанию: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Для заполнения свободного пространства нам необходимо, чтобы блоки выросли, т.е. необходимо свойство flex-grow или первое значение свойства flex, определяющего сокращенную запись. Давайте используем свойство для Flex-элементов (класс block):

.block{
	background: #26a082;
	color: #fff;
	font-size: 20px;
	border: 1px solid #ccc;
	flex: 1;
}

Теперь блоки заняли не только всю доступную высоту, но и всю доступную ширину. При этом ширина каждого блока одинакова. Поскольку мы задались целью организовать некое подобие трехколоночного макета, давайте увеличим ширину центрального блока (block2). Для этого увеличим для него значение flex-grow:

.block2{
	flex: 5;
}

В итоге мы получили необходимый результат, центральный блок в 5 раз больше боковых.

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

Практика HTML5 и CSS3 с нуля до результата!

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

Получить

Метки: ,

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

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

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

Ваш 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