Все о свойствах flexbox
Концепция свойств Flexbox заключается в том, чтобы предоставить контейнеру возможность автоматически изменять ширину, высоту и порядок его элементов, чтобы наилучшим образом заполнить доступное пространство. Это может быть очень полезно для размещения элементов на экранах разных размеров и на разных устройствах. Элементы расширяются, чтобы заполнить любое свободное пространство, или сокращаются, чтобы избежать переполнения.
CSS Flexbox grid для начинающих
CSS - одна из первых и самых простых вещей, которую нужно изучить в веб-разработке и дизайне, но не путайте ее простоту с отсутствием функций. Он имеет ряд удивительных функций и возможностей, готовых к использованию, одной из которых является его относительно новый модуль компоновки: свойства Flexbox.
Свойства Flexbox являются одним из новейших макетов, доступных для CSS3, и об этом можно многое узнать. Здесь мы разберемся с макетом и тем, как его использовать. Перед тем, как мы начнем, вот небольшой фон о свойствах Flexbox:
Что такое режимы макета?
Проще говоря, CSS Flexbox grid - это режим макета. У CSS есть несколько существующих режимов макета. Режим макета блока (например, display: block) существует уже давно. Блочные макеты являются хорошим выбором для оформления полных документов. Фактически, веб-браузер по умолчанию обрабатывает несколько элементов, таких как div и абзацы, как уровень блока.
Другой распространенный режим макета - встроенный. Сильный тег, тег ввода и тег привязки являются примерами встроенных элементов. Инструменты разработчика Google Chrome позволяют даже просматривать «вычисляемый стиль» элемента, чтобы определить свойства и значения CSS, которые были применены к элементам, явно не установленным разработчиком.
Относительно новый макет свойств Flexbox (Гибкая коробка) был разработан как более эффективный метод размещения, выравнивания и распределения пространства между элементами контейнера, даже если размер этих элементов является динамическим или неизвестным. Отсюда и термин «гибкий».
Концепция Flexbox Properties
Самым важным в свойствах Flexbox является то, что он не зависит от направления. Хотя макет блока основан на вертикали, а встроенный макет на горизонтальной плоскости, Flexbox не является ни тем, ни другим. Блочные и встроенные функции хорошо работают в нужных ситуациях, но им не хватает гибкости для поддержки сложных или больших приложений, особенно когда речь идет об изменении ориентации, растяжении, сжатии, изменении размера и других изменениях размеров элементов.
Где используются свойства Flexbox?
Как и любой другой макет CSS, Flexbox лучше всего использовать в определенных ситуациях. В частности, он подходит для небольших макетов и компонентов приложения. Для более масштабных макетов более разумным выбором будет сетка.
Почему Flexbox предпочтительнее?
Многие разработчики и дизайнеры отдают предпочтение свойствам Flexbox, когда они могут (иногда слишком часто!). Это потому, что свойства Flexbox проще в использовании; позиционирование элементов намного проще, поэтому вы можете получить более сложные макеты с меньшим количеством кода. Другими словами, это упрощает процесс разработки.
Руководство по свойствам Flexbox
Теперь, когда вы немного узнали о свойствах Flexbox и о том, как и почему он работает, вот подробное руководство по макету. Модель макета состоит из родительского контейнера, также называемого «гибкий контейнер». Непосредственные потомки из этого контейнера называются 'flex items'.
Макет прошел несколько итераций и синтаксических изменений за годы, прошедшие с момента создания его первого проекта в 2009 году. Последняя версия Flexbox поддерживается в следующих веб-браузерах:
- Опера 17+
- Internet Explorer 11+
- Mozilla Firefox 28+
- Google Chrome 29+
- Apple Safari 6.1+
- Android 4.4+
- iOS 7.1+
Терминология, используемая в свойствах Flexbox
Вот взгляд на некоторые основные термины, используемые в макете свойств Flexbox:
- Отображение: эта команда используется для определения гибкого контейнера. Он может быть встроенным или блочным, в зависимости от того, что он также определяет гибкий контент для всех элементов в контейнере. Пример:
.container (
дисплей: гибкий; / * или inline-flex * /
)
- Порядок: элементы Flex по умолчанию располагаются в соответствии с исходным порядком, но свойство order может управлять порядком, в котором элементы отображаются в контейнере. Пример:
.вещь (
заказ: ;
)
- Flex-direction: этот порядок устанавливает основную ось, определяя направление, в котором flex-элементы размещаются внутри контейнера. Гибкие элементы могут быть расположены в основном в вертикальном или горизонтальном направлениях. Пример:
.container (
flex-direction: row | row-reverse | column | column-reverse;
)
- Flex-grow: этот порядок определяет способность гибкого элемента автоматически масштабироваться, если у него есть место. Он может принять неопределяемую стоимость, чтобы служить пропорцией. Это значение определяет, сколько места должен занимать элемент в гибком контейнере. Например, если все элементы имеют flex-grow установлен в 1, оставшееся пространство в контейнере будет равномерно распределено для всех дочерних элементов. Если значение равно 2, оставшееся пространство займет в два раза больше места, чем остальное. Пример:
.вещь (
flex-grow:; / * по умолчанию 0 * /
)
- Сжатие при изгибе: это делает в точности то же самое, что и при изгибе при растяжении, в том смысле, что при необходимости сокращает изгибаемые элементы. Пример:
.вещь (
flex-shrink:; / * по умолчанию 1 * /
)
- Flex-based: этот порядок определяет размер элементов по умолчанию перед распределением оставшейся части пространства. Это может быть длина, например 5rem или 20%, или ключевое слово. Ключевое слово «auto» указывает, что ширина и высота элемента измеряется, а ключевое слово «content» указывает, что размер элемента определяется на основе его содержимого. Пример:
.вещь (
flex-base: | авто; / * авто по умолчанию * /
)
- Flex: это комбинированное сокращение для всех трех перечисленных выше свойств: flex-grow, flex-base и flex-shrink. По умолчанию установлено значение «0 1 авто».
.вещь (
flex: нет | (||)
)
- Justify-content: этот порядок определяет выравнивание по главной оси и помогает распределить дополнительное свободное пространство, если осталось место, когда элементы негибкие или достигли максимального размера. Это также помогает контролировать выравнивание элемента при переполнении.
.container (
justify-content: flex-start | гибкий конец | центр | пространство-между | пространство вокруг;
)
- Align-items: используется для определения поведения макета гибких элементов по умолчанию на поперечной оси текущей линии. По сути, это версия «justify-content» на поперечной оси, которая перпендикулярна главной оси. Пример:
.container (
выровнять элементы: flex-start | гибкий конец | центр | базовый уровень | протяжение;
)
- Align-content: этот порядок выравнивает линии контейнера в случае, если на поперечной оси имеется дополнительное пространство. Это похоже на «justify-content», но для поперечной оси вместо главной оси. Если есть только одна строка flex-элементов, это свойство не имеет никакого эффекта. Пример:
.container (
выровнять контент: flex-start | гибкий конец | центр | пространство-между | пространство вокруг | протяжение;
)
Использование свойств Flexbox
Чтобы использовать макет Flexbox, вы можете просто установить свойство display в родительском элементе HTML, как показано ниже:
.flex-container (
дисплей: -webkit-flex; / * Сафари * /
дисплей: гибкий;
)
Если вы предпочитаете отображать как встроенный элемент, вы можете написать:
.flex-container (
дисплей: -webkit-inline-flex; / * Сафари * /
дисплей: inline-flex;
)
Это свойство требуется только для установки в родительском контейнере flex и его непосредственных элементах flex. Дочерние контейнеры автоматически станут элементами flex.
Рекомендуемые курсы
- Онлайн курс по бесплатному jQuery
- Онлайн курс по бесплатному угловому JS
- Онлайн обучение на Mudbox
- Сертификационный тренинг по Free Ruby
Flexbox Properties - свойства контейнера Flex
Существует множество способов группировки свойств Flexbox, и самый простой способ узнать о них - разделить их на свойства контейнера и элемента Flex. Мы только что рассмотрели некоторые свойства flex-контейнера выше. Давайте посмотрим на остальное:
-
Flex-направление: строка или столбец
Свойство flex-direction может быть расположено в виде столбцов вертикально или строк горизонтально. С направлением строки гибкие элементы располагаются слева направо по умолчанию. Row-reverse изменяет это направление справа налево. Направление столбца по умолчанию сверху вниз, а функция обратного столбца меняет направление в направлении снизу вверх.
-
Flex-wrap: обернуть или обернуть
Свойство flex-wrap определяет, будут ли дочерние элементы flex-контейнера размечены в несколько строк или в одну строку, а также направление, в котором уложены новые строки. Значение nowrap отображает элементы flex, отображаемые в одной строке, по умолчанию сокращенные до ширины контейнера. Значение обтекания позволяет видеть элементы flex, отображаемые в разных строках в направлении слева направо или сверху вниз. Вы можете добавить Wrap-reverse, чтобы изменить порядок. Значением по умолчанию является nowrap.
-
Flex-поток
Это свойство по сути является сокращением для совместного задания свойств flex-direction и flex-wrap. Значением по умолчанию является 'row nowrap'. Пример:
.flex-container (
flex-flow: ||
)
-
Обоснуйте-контент
Свойство justify-content имеет четыре значения: flex-start для выравнивания элементов по левой стороне контейнера; гибкий конец для выравнивания предметов по правой стороне; центр для выравнивания с центром; пробел - для выравнивания элементов с равным интервалом между ними, причем первый и последний элементы выровнены по краям контейнера; и пространство вокруг для выравнивания гибкого элемента с равным интервалом вокруг них, включая первый и последний элементы. Flex-start является значением по умолчанию.
-
Совместите-элементы
Это свойство имеет пять значений: растянуть, чтобы масштабировать гибкие элементы, чтобы заполнить всю ширину или высоту от поперечного начала до поперечного конца контейнера; flex-start для укладки предметов на перекрестном старте; гибкий конец, чтобы сложить пункты в поперечном конце; центр для выравнивания элементов по центру поперечной оси; и базовая линия, чтобы выровнять элементы так, чтобы их базовые линии были выровнены. Растянуть это значение по умолчанию.
-
Align-контент
Это свойство выравнивает линии гибкого контейнера, когда на поперечной оси имеется дополнительное пространство. Его значения: растянуть, чтобы распределить пространство после каждой строки; flex-start для укладки предметов в направлении кросс-старта; гибкий конец, чтобы сложить пункты к перекрестку; центр, чтобы сложить предметы в центре поперечной оси; пространство вокруг, чтобы равномерно распределить пространство вокруг гибких элементов. Значением по умолчанию является растяжка.
Flexbox Properties - свойства элемента Flex
Теперь, когда вы знаете о свойствах контейнера Flexbox, давайте посмотрим на свойства элемента:
- порядок
Это свойство контролирует порядок появления дочерних элементов flex-контейнера. Они упорядочены в гибком контейнере по умолчанию.
.flex-item (
заказ: ;
)
Вы можете изменить порядок элементов Flex без необходимости реструктуризации HTML-кода. Значение по умолчанию равно нулю.
- Align-я
Это свойство позволяет переопределить выравнивание по умолчанию для определенного элемента flex. Вы можете использовать значения от align-items для этого свойства.
.flex-item (
выровнять себя: авто | flex-start | гибкий конец | центр | базовый уровень | протяжение;
)
Автоматическое значение в align-self вычисляется по значению align-items на родительском элементе. Если у элемента нет родителя, вместо него используется растяжка.
Основные примеры
Это все, что вам нужно знать для использования сетки CSS Flexbox. Теперь пришло время практиковать то, что вы узнали. Вот несколько примеров, которые показывают, как все эти свойства объединяются. Давайте начнем с чего-то абсолютно простого:
.parent (
дисплей: гибкий;
высота: 300 пикселей;
)
.child (
ширина: 100 пикселей;
высота: 100 пикселей;
наценка: авто;
)
Это пример идеального центрирования. Значения высоты и ширины могут быть изменены по вашему желанию. Ключевым моментом здесь является установка поля 'auto', чтобы гибкий контейнер автоматически занимал любое дополнительное пространство. Достаточно просто!
Теперь давайте перейдем к добавлению еще нескольких свойств: списка с шестью элементами с фиксированными размерами, которые могут иметь авторазмер. Они должны быть равномерно распределены по горизонтальной оси.
.flex-container (
дисплей: гибкий;
justify-content: пространство вокруг;
)
Далее, давайте попробуем центрировать выравнивание по правому краю для экранов среднего размера и сделать его одним столбцом на небольших устройствах.
/ * Большой * /
.navigation (
дисплей: гибкий;
flex-flow: обтекание строк;
justify-content: flex-end;
)
/ * Средние экраны * /
@media all and (max-width: 800px) (
.navigation (
justify-content: пространство вокруг;
)
)
/ * Маленькие экраны * /
@media all and (max-width: 500px) (
.navigation (
flex-direction: столбец;
)
)
Время сделать еще один шаг вперед! Давайте попробуем макет «сначала для мобильных устройств» с тремя столбцами, с полным нижним колонтитулом и верхним колонтитулом, независимо от исходного порядка.
.wrapper (
дисплей: гибкий;
flex-flow: обтекание строк;
)
/ * Мы говорим, что все элементы имеют ширину 100% * /
.header, .main, .nav, .aside, .footer (
изгиб: 1 100%;
)
/ * Мы полагаемся на исходный заказ для мобильно-первого подхода * /
/ * Средние экраны * /
@media all and (min-width: 600px) (
.aside (flex: 1 auto; )
)
/ * Большие экраны * /
@media all and (min-width: 800px) (
.main (flex: 2 0px; )
.aside-1 (заказ: 1; )
.main (order: 2; )
.aside-2 (заказ: 3; )
.footer (заказ: 4; )
)
Вывод
Это только некоторые основные примеры. Вы можете поэкспериментировать с сеточными макетами CSS Flexbox, и они абсолютно бесценны, если вы хотите создать адаптивную веб-страницу.
Рекомендуемые статьи
Итак, вот несколько статей, которые помогут получить более подробную информацию о свойствах flexbox, коде flexbox, а также о сетке flexbox css, поэтому просто перейдите по ссылке, которая дана ниже.
- HTML против XML - основные отличия
- CSS3 против CSS - чем они отличаются? (Infograph)
- Отличия HTML от CSS
- HTML5 против Flash