Flexbox CSS

Что это?

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

Для чего нужно это знать?

Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование. С их помощью сложно или невозможно достичь следующих простых требований к макету: Вертикального выравнивания блока внутри родителя. Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно. Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно. Основные преимущества flexbox Все блоки очень легко делаются “резиновым”, что уже следует из названия “flex”. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство. Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно. Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки. Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место. Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Flexbox адаптирован для этого. В нем есть понятие начала и конца, а не права и лева. Т.е. в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке. Синтаксис CSS правил очень прост и осваивается довольно быстро.

Какие базовые понятия включает этот навык?

Одним из основных понятий в fleхbox являются оси. Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы. Поперечной осью называется направление, перпендикулярное главной оси. Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction. justify-content – выравнивание по главной оси, определяет то, как будут выровнены элементы вдоль главной оси. align-items – выравнивание по поперечной оси, определяет то, как будут выровнены элементы вдоль поперечной оси. СSS свойства flex-direction, justify-content, align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap. Существует также свойство align-content, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера. Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;) СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам. CSS правила для дочерних элементов flex-контейнера (flex-блоков) flex-basis – базовый размер отдельно взятого flex-блока. Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px, em, %, …) или auto(по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно. flex-grow – “жадность” отдельно взятого flex-блока. Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение ( по умолчанию 0) flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока. Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1. flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis align-self – выравнивание отдельно взятого flex-блока по поперечной оси. Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока. order – порядок следования отдельно взятого flex-блока внутри flex-контейнера. По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order. Оно задается целым числом и по умолчанию равно 0. Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.