Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

209. Знакомимся с Flexbox в CSS

Оглавление урока

Введение

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

Главной идеей модуля Flexbox является дать контейнеру возможность динамически менять ширину и высоту для наилучшего заполнения пространства.

Так как Flexbox это не одно свойство, а множество, давайте для начала разберемся с понятиями. Для этого обратимся к рисунку 1.

Рисунок 1. Направления в Flexbox
Рисунок 1. Направления в Flexbox

Рисунок взят из спецификации. Поговорим теперь о каждом понятии. Элементы могут располагаться как по main axis (главная ось от main start до main end), так и по cross axis (поперечная ось от cross start до cross end). Flex container (flex-контейнер) – родительский блок, который в последствии мы будем наделять свойством гибкости (flex). Flex item (flex-элемент) – дочерние элементы.

Остальное интуитивно понятно. Так же стоит заметить, что главная ось flex-контейнера не обязательно горизонтальная (этот момент зависит от свойства flex-direction, о чем будет далее).

Создадим пару блоков с разным по объему содержимым и начнем изучать свойства Flexbox.

Пример
<div class = "main">
<div class = "block">Текст Текст Текст Текст Текст Текст Текст </div>
<div class = "block">Текст Текст </div>
<div class = "block">Текст Текст Текст Текст Текст Текст Текст Текст Текст </div>
<div class = "block">Текст </div>
<div class = "block">Текст Текст Текст </div>
</div>

И код CSS:

Пример
.main {
width: 500px;
background: #f1f1f1;
}
.main .block {
width: 50px;
background: #00FF00;
margin: 0 0 5px 5px;
}

Получаем результат как на рисунке 2.

Рисунок 2. Результат верстки
Рисунок 2. Результат верстки

Определим flex-контейнер (в нашем случае это блок с классом .main). Далее код CSS:

Пример
.main {
/* предыдущий код */
display: flex;
}

Свойство flex-direction

По умолчанию свойство flex-direction имеет значение row, поэтому наши блоки разложились по главной оси слева направо. Свойство flex-direction имеет следующие значения:

  • row – о нем уже сказали;
  • row-reverse – раскладка блоков справа налево по главной оси;
  • column – все то же самое, но по вертикальной (поперечной) оси сверху вниз;
  • column-reverse – снизу вверх.

Свойство flex-wrap

Следующее свойство это flex-wrap, которое по умолчанию имеет значение nowrap. Значение nowrap означает, что элементы будут стараться уместиться на одной строке. Теперь уменьшим блок .main до 200 пикселей и посмотрим результат. Как видите, дочерние блоки вышли за пределы родительского блока, так как по умолчанию у свойства flex-wrap значение nowrap. Напишем свойство flex-wrap со значением wrap (означает перенос блоков, если они не помещаются):

Пример
.main {
width: 200px;
background: #f1f1f1;
display: flex;
flex-wrap: wrap;
}

Свойство flex-flow

Свойства flex-direction и flex-wrap можно сократить, объединив их в одно свойство: flex-flow:

Пример
.main {
/* предыдущий код */
flex-flow: row wrap;
}

Свойство justify-content

Следующим свойством является justify-content, которое определяет выравнивание вдоль главной оси. Данное свойство позволяет распределить оставшееся свободное место. В нашем случае, правая часть родительского контейнера пустует, рисунок 3.

Рисунок 3
Рисунок 3

По умолчанию свойство justify-content имеет значение flex-start, что означает о выравнивании дочерних элементов по левому краю. Другие значения свойства justify-content:

  • flex-end - элементы притянуты к правой части родительского блока;
  • space-between - равномерное распределение элементов по главной оси, где первый элемент на линии расположен main start, а последний на main end.
  • space-around - элементы расположены на одной линии с одинаковым пространством вокруг них.
  • space-evenly - элементы расположены таким образом, что расстояние между двумя любыми элементами одинаковое;
  • center - элементы располагаются по центру.

Свойство align-items

Перейдем к свойству align-items. Это свойство определяет, как будут располагаться элементы относительно горизонтальной (поперечной) оси. Доступны следующие значения свойства align-items:

  • stretch – элемент растягивается по высоте и заполняет все доступное пространство;
  • flex-start – элементы выравниваются по верхней линии строки;
  • flex-end – элементы выравниваются по нижней линии строки;
  • center – элементы центрируются по горизонтальной оси;
  • baseline – элементы выравниваются по их базовой линии.

Свойство align-content

Свойство align-content выравнивает на поперечной оси в пределах flex-контейнера, когда есть свободное пространство. Это свойство не сработает, если есть только одна строка.

  • flex-start – элементы сдвинуты к верхней части контейнера;
  • flex-end – элементы сдвинуты к нижней части контейнера;
  • stretch – элементы растягиваются и заполняют все свободное пространство;
  • center – элементы выравниваются по центру контейнера;
  • space-between – элементы равномерно распределяются в контейнере;
  • space-around – элементы распределены с равномерным пространством вокруг;
  • space-evenly – элементы растянуты на одинаковое расстояние друг от друга.

Свойства для дочерних элементов

Перейдем к свойствам для дочерних элементов. Для каждого элемента можно задавать пропорцию, которую он будет занимать при помощи свойства flex-grow. Если задать для всех дочерних элементов значение 1:

Пример
.main .block {
/* предыдущий код */
flex-grow: 1;
}

Получится следующий результат, рисунок 4.

Рисунок 4
Рисунок 4

Противоположным для flex-grow, является свойство flex-shrink, которое определяет возможность сжатия элемента. Оба свойства не принимают отрицательные свойства.

Следующим свойством для дочерних элементов рассмотрим flex-basis, которое определяет размер перед заполнением оставшегося пространства по умолчанию. В качестве значения принимает длину (50%, 100px и т.д.) или ключевое слово, например, content. Значение по умолчанию у свойства flex-basis: auto.

Кстати, у этих трех свойств есть сокращение. Вместо них можно использовать одно свойство flex. Синтаксис следующий:

Пример
.main .block {
/* предыдущий код */
flex: none | [ <'flex - grow'> <'flex - shrink'>? || <'flex - basis'> ]
}

Второй и третий параметры необязательные.

Так же для отдельного элемента можно переопределить выравнивание, которое указано у родителя при помощи свойства align-items. Переопределить можно при помощи свойства align-self.

Как упростить себе верстку?

Откройте страницу с вашим flexbox’ом, после чего откройте консоль разработчика (кнопка F12). Теперь выберите flex-контейнер, рисунок 5.

Рисунок 5
Рисунок 5

И теперь найдите CSS свойство display со значением flex. После нажмите на иконку рядом со значением flex, рисунок 6.

Рисунок 6
Рисунок 6

Как видите, все что мы сегодня обсуждали очень понятно визуализировано в консоли разработчика, рисунок 7.

Рисунок 7. Открытая вкладка свойств для flexbox
Рисунок 7. Открытая вкладка свойств для flexbox

В этом уроке мы познакомились с относительно новой технологией – Flexbox. Разобрались с базовыми понятиями, основными свойствами для управления компоновкой гибких блоков и свойствами дочерних элементов в контексте данной темы.

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Свойство background для работы с фономЦвета и фон
Работа с файлами в Python Знакомство с Python
Структуры данных в PythonЗнакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python
Аргументы и параметры функций, операторы * и ** в PythonЗнакомство с Python
Свойство z-index для определения уровня элементаПозиционирование
Основы функций в PythonЗнакомство с Python
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно