Как привязать элемент к правому краю css

Как прижать элемент к правому краю

Вчера, на работе, я пытался выровнять блочный элемент по правому краю. Такая задача встречается не часто, но даже когда она встречается, я использую inline-block или float , но можно обойтись без них.

Способ, о котором я расскажу, вам вероятно знаком. Одним из первых у верстальщиков встает вопрос о выравнивании элементов. Часто это центрирование блочных элементов через margin . Но я никогда не видел, чтобы кто-то использовал margin для выравнивания по правому краю. Думаю это из-за недопонимания механизма работы этого свойства со значением auto . Через него можно и по вертикали центрировать, но это тема отдельной статьи.

Демонстрация с тремя выравниваниями через margin .

Для выравнивания блочных элементов по центру, используется метод через margin auto .

Auto в данном случае говорит нам, что расстояние слева и справа блока, рассчитается браузером пропорционально,m основываясь на размере элемента и оставшимся местом. Так если элемент занимает 50% по ширине, боковые отступы станут одинаковыми, по 25%.

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

Не забудьте, что элемент должен быть меньше чем у родителя и быть блочным.

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

За и против. Оформление незагруженных изображений.

Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.

Управляем поведением font-face в CSS

Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии

Но блок вообще никак не хочет переместиться на другую сторону экрана((( Что делать?

  • Вопрос задан более трёх лет назад
  • 22337 просмотров

Включи логику.
Ты задал абсолютное позиционирование, вырвав тем самым элемент из потока.
И пытаешься задать ему обтекание.
Внимание вопрос: какие элементы его будут обтекать, если сам элемент вырван из потока?

Вывод: float для твоей задачи не подходит.

Думай дальше. Ты задал позиционирование элементу. Какие свойства задают позицию блоков?
Догадался уже, наверное — top, left, right, bottom.

PS. Не стесняйтесь включать мозги =) Помогает в решении проблем.

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

  • размерами и типом элемента,
  • схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
  • отношениями между элементами в дереве документа,
  • внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).

Схемы позиционирования

  • Содержание:
  • 1. Содержащий блок
  • 2. Выбор схемы позиционирования: свойство position
  • 3. Смещение блока: свойства top, right, bottom, left
  • 4. Обтекание: свойство float
  • 5. Управление потоком рядом с плавающими элементами: свойство clear
  • 6. Определение контекста наложения: свойство z-index
  • 6.1. Контекст наложения

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток

Нормальный поток включает блочный контекст форматирования (элементы с display block , list-item или table ), строчный (встроенный) контекст форматирования (элементы с display inline , inline-block или inline-table ), и относительное и «липкое» позиционирование элементов уровня блока и строки.

Обтекание

В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right .

Абсолютное позиционирование

В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed; .

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

1. Содержащий блок

Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body , который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:

  • Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
  • Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
  • Содержащим блоком элемента с position: fixed; является окно просмотра.
  • Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
    — если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding ;
    — если предок — элемент уровня строки, содержащим блоком будет область содержимого;
    — если предков нет, то содержащий блок элемента определяется как начальный содержащий блок.
  • Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.

2. Выбор схемы позиционирования: свойство position

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

Свойство не наследуется.

position
Значение:
static Блок располагается в соответствии с нормальным потоком. Свойства top , right , bottom и left не применяются. Значение по умолчанию.
relative Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно его нормального положения и во всех случаях, включая элементы таблицы, не влияет на положение любых следующих блоков. Тем не менее, такое смещение может привести к перекрытию блоков, а также к появлению полосы прокрутки в случае переполнения.

Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.

Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.

Влияние position: relative; на элементы таблицы определяется следующим образом:
Элементы с table-row-group , table-header-group , table-footer-group иd table-row смещаются относительно их обычной позиции в таблице. Если ячейки таблицы занимают несколько строк, смещаются только ячейки начальной строки.
table-column-group , table-column не смещает соответствующий столбец и не оказывает визуального влияния.
table-caption and table-cell смещаются относительно своего нормального положения в таблице. Если ячейка таблицы охватывает несколько столбцов или строк, то она смещается целиком.

absolute Положение блока (и, возможно, размер) задается с помощью свойств top , right , bottom и left . Эти свойства определяют явное смещение относительно его содержащего блока. Абсолютно позиционированные блоки полностью удаляется из нормального потока, не влияя на расположение сестринских элементов.

Отступы margin абсолютно позиционированных блоков не схлопываются.

Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с position: absolute; .

Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения z-index перекрывающихся блоков.

sticky Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно своего ближайшего предка с прокруткой или окна просмотра, если ни у одного из предков нет прокрутки.

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

«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.

«Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.

fixed Фиксированное позиционирование аналогично абсолютному позиционированию, с отличием в том, что для содержащим блоком устанавливается окно просмотра. Такой блок полностью удаляется из потока документа и не имеет позиции относительно какой-либо части документа. Фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения.

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

initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента.

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

3. Смещение блока: свойства top, right, bottom, left

Элемент считается позиционированным, если свойство position имеет значение, отличное от static . Позиционированные элементы генерируют позиционированные блоки и могут быть расположены в соответствии со следующими четырьмя физическими свойствами:

top
Значение:
auto Влияние значения зависит типа элемента. Значение по умолчанию.
длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
% Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin ) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).

right
Значение:
auto Влияние значения зависит типа элемента. Значение по умолчанию.
длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
% Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.

bottom
Значение:
auto Влияние значения зависит типа элемента. Значение по умолчанию.
длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
% Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Свойство bottom указывает расстояние, на которое нижний край блока смещен вверх относительно нижнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно нижнего края самого блока.

left
Значение:
auto Влияние значения зависит типа элемента. Значение по умолчанию.
длина Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
% Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Свойство left указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.

Положительные значения смещают элемент внутрь содержащего блока, а отрицательные — за его пределы.

4. Обтекание: свойство float

Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.

При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.

Правила, регулирующие поведение плавающих боков, описываются свойством float .

Свойство не наследуется.

float
Значение:
none Отсутствие обтекания. Значение по умолчанию.
left Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
right Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
inherit Наследует значение свойства от родительского элемента.

Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.

Плавающие элементы могут использовать отрицательные отступы margin , чтобы перемещаться за пределы области содержимого их родительского элемента.

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .

Свойство не оказывает влияние на элементы с display: flex и display: inline-flex . Не применяется к абсолютно позиционированным элементам.

Рис. 2. Обтекание элементов

5. Управление потоком рядом с плавающими элементами: свойство clear

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

clear
Значение:
none Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию.
left Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе.
right Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе.
both Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе.
inherit Наследует значение свойства от родительского элемента.

Для предотвращения отображение фона или границ под плавающими элементами используется правило .

6. Определение контекста наложения: свойство z-index

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

Рис. 3. Положение элементов вдоль оси Z

Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.

Блоки с более высокими уровнями всегда отображаются перед блоками с более низкими уровнями, а блоки с одинаковым уровнем располагаются снизу вверх в соответствии с порядком следования элементов в исходном документе. Блок элемента имеет ту же позицию, что и блок его родителя, если только ему не присвоен другой уровень свойством z-index .

Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.

Свойство не наследуется.

z-index
Значение:
auto Вычисляется в 0 . Если для блока задано position: fixed; или это корневой элемент, значение auto также устанавливает новый контекст наложения. Значение по умолчанию.
целое число Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
inherit Наследует значение свойства от родительского элемента.
initial Устанавливает значение свойства в значение по умолчанию.
6.1. Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

  • Корневой элемент , который содержит все элементы веб-странице.
  • Блочные элементы, неплавающие и непозиционированные.
  • Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
  • Строковые непозиционированные элементы (текст, изображения).
  • Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity , filter , transform ):

justify-content

Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.

При расположении флекс-элементов в ряд свойство управляет выравниванием по горизонтали. При расположении в колонку — выравниванием по вертикали.

Пример

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

Как это понять

У флексбоксов множество свойств, а иногда возникает необходимость сокращать код. Шорткаты дают возможность указывать в одну строку сразу несколько значений для нескольких свойств.

Шорткат flex-flow объединил в себе свойств, связанные с потоком внутри флекс-контейнера.

Как пишется

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

Если основная ось идёт горизонтально, то для сайта с направлением письма слева направо (LTR) значение start прижмёт элементы к левому краю, а значение end прижмёт элементы к правому краю. Для сайтов с направлением письма справа налево (RTL) элементы будут прижиматься к противоположным краям для аналогичных значений.

В случае, если указано свойство flex-direction: column , то значения left и right срабатывают как start .

Подсказки

Хотя большинство значений поддерживаются основными браузерами, с некоторыми из них могут быть трудности. Поэтому лучше на всякий случай проверяйте поддержку на Can I use.

Гайд по flexbox

Всё, что нужно знать про флексбоксы: основные термины, свойства флекс-контейнера и флекс-элементов, полезные ссылки по теме.

Время чтения: 12 мин

  1. Что это?
  2. Основные термины
  3. Свойства флекс-контейнера
  1. display
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items
  7. align-content
  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self
  7. Ссылки
  1. Егор Левченко
  2. Алёна Батицкая
  • Егор Левченко ,
  • Светлана Коробцева

Обновлено 9 ноября 2021

Что это?

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

Идея флексбоксов появилась ещё в 2009 году, и этот стандарт до сих пор развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко).

Основные термины

  • Флекс-контейнер: элемент, к которому применяется свойство display: flex . Вложенные в него элементы подчиняются правилам раскладки флексов.
  • Флекс-элемент: элемент, вложенный во флекс-контейнер.

Пример флекс-контейнера и вложенных в него флекс-элементов

  • Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы.
  • Поперечная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Позже вы поймёте, для чего она нужна.

Наглядный вид основной оси и поперечной оси

  • Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов.
  • Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.

Наглядный вид начала/конца основной оси и начала/конца поперечной оси

  • Размер по основной оси (основной размер): размер флекс-элемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси.
  • Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот.

Наглядный вид размера по основной оси и по поперечной оси

Свойства флекс-контейнера

display

Когда мы задаём какому-то элементу значение flex для свойства display , мы превращаем этот элемент в флекс-контейнер. Внутри него начинает действовать флекс-контекст, его дочерние элементы начинают подчиняться свойствам флексбокса.

Снаружи флекс-контейнер выглядит как блочный элемент — занимает всю ширину родителя, следующие за ним элементы в разметке переносятся на новую строку.

Если контейнеру задано значение inline-flex , то снаружи он начинает вести себя как строчный (инлайн) элемент — размеры зависят только от внутреннего контента, встаёт в строку с другими элементами. Внутри это ровно такой же флекс-контейнер, как и при предыдущем значении.

flex-direction

Свойство управления направлением основной и поперечной осей.

  • row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
  • row-reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
  • column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
  • column-reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.

Пример свойства flex-direction

Важный момент: на сайтах с направлением текста справа налево, например, на сайте на арабском языке, для значений row и row-reverse основная ось будет идти в обратном направлении. Для значений column и column-revers своё направление поменяет поперечная ось.

flex-wrap

По умолчанию значение у свойства flex-wrap — nowrap . При этом флекс-элементы помещаются (или пытаются уместиться) в один ряд и не переносятся в новый ряд, даже если не влезают в размеры родителя.

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

Ещё одно возможное значение — wrap-reverse . В этом случае элементы будут располагаться снизу вверх, заполнив собой сперва нижний ряд, а те, что не влезли, перепрыгнут в ряд выше.

Пример свойства flex-wrap

flex-flow

Это свойство-шорткат для одновременного определения значений свойств flex-direction и flex-wrap .

Как и со всеми шорткатами, с этим стоит быть осторожным. Хоть он и позволяет сэкономить пару строк кода, в случае переопределения одного из значений придётся переписывать свойство целиком, повторяя второе значение, которое не меняется. В таком случае проще было бы иметь два отдельных свойства и менять значения отдельно.

justify-content

Свойство позволяет выравнивать флекс-элементы внутри флекс-контейнера по основной оси.

  • flex-start (значение по умолчанию) — элементы прижимаются к краю, от которого начинается основная ось.
  • flex-end — элементы прижимаются к краю, у которого основная ось заканчивается.
  • start — элементы прижимаются к тому краю, откуда начинается чтение на том языке, на котором отображается сайт. Например, для русского языка элементы прижмутся к левому краю при горизонтальной основной оси, а для арабского языка — к правому краю.
  • end — элементы прижимаются к краю, противоположному началу направления чтения на том языке, на котором отображается сайт. Например, при горизонтальной основной оси на русском языке элементы прижмутся к правому краю.
  • left — элементы прижмутся к левому краю родителя. В случае, если указано свойство flex-direction: column , значение срабатывает как start .
  • right — элементы прижмутся к правому краю. В случае, если указано свойство flex-direction: column , значение срабатывает как start .
  • center — элементы выстраиваются по центру родителя.
  • space-between — крайние элементы прижимаются к краям родителя, оставшиеся выстраиваются внутри контейнера равномерно, так, чтобы между ними были одинаковые отступы.
  • space-around — свободное пространство делится поровну между элементами и по половине от этой доли размещается по бокам от каждого элемента. Таким образом, между соседними элементами будет равное расстояние, а снаружи крайних элементов — по половине этого расстояния.
  • space-evenly — свободное место будет распределено так, чтобы расстояние между любыми двумя элементами было одинаковым и расстояние от крайних элементов до края было таким же.

Хотя большинство значений поддерживаются основными браузерами, с некоторыми из них могут быть трудности. Поэтому лучше на всякий случай проверяйте поддержку на Can I use.

align-items

Свойство выравнивания элементов внутри контейнера по поперечной оси.

  • stretch (значение по умолчанию) — элементы растягиваются вдоль поперечной оси так, чтобы заполнить всего родителя. Это очень удобно, если вы делаете двухколоночный макет. Раньше приходилось при помощи разных костылей добиваться одинаковой высоты, а теперь достаточно сделать контейнер флексом, и колонки по умолчанию будут одной высоты.
  • flex-start или start — элементы выстраиваются у начала поперечной оси. Разница между ними лишь в том, что второе значение «уважает» направление чтения выбранного языка.
  • flex-end или end — элементы выстраиваются у конца поперечной оси. Разница между первым и вторым значениями аналогична предыдущему пункту.
  • center — элементы выстраиваются по центру поперечной оси.
  • baseline — элементы выравниваются по базовой линии текста. «Базовая линия» — baseline — воображаемая линия, проходящая по нижнему краю знаков шрифта (без учёта выносных элементов).

Это может быть сложно понять сразу, поэтому мы сделали демку. Обратите внимание, что вне зависимости от размера шрифта все блоки выравниваются по базовой линии первой строки.

align-content

Свойство распределяет свободное пространство по поперечной оси между рядами флекс-элементов. Предположим, у вас 11 элементов в 3 рядах. Если размер родителя по поперечной оси позволяет, то при помощи align-content можно распределять строчки элементов: по верхнему краю, по нижнему, по центру или равномерно.

Не имеет видимого значения, если элементы располагаются в один ряд.

  • stretch (значение по умолчанию) — ряды растягиваются одинаково, так, чтобы занять всё доступное пространство родителя.
  • flex-start / start — все ряды располагаются у начала поперечной оси. Первое значение не зависит от направления чтения текущего языка, в отличие от второго.
  • flex-end / end — все ряды располагаются у конца поперечной оси. end «уважает» направление чтения текущего языка.
  • center — ряды выравниваются по центру родителя.
  • space-between — первый ряд прижимается к началу поперечной оси, последняя — к концу поперечной оси, а остальные располагаются так, чтобы свободное пространство было поделено на отступы между ними равномерно.
  • space-around — отступы у каждого ряда равнозначны отступам у любого другого ряда.
  • space-evenly — отступы между рядами и от краёв родителя одинаковые.

Свойства флекс-элемента

order

При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.

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

Значение задаётся в виде целого отрицательного или положительного числа. Элементы встают по возрастающей.

Пример свойства флекс-элементов order

flex-grow

Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и насколько. По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).

Если у всех флекс-элементов будет прописано flex-grow: 1 , то свободное пространство в контейнере будет равномерно распределено между всеми.

Если при этом одному из элементов мы зададим flex-grow: 2 , то он постарается занять в два раза больше свободного места, чем его соседи.

flex-shrink

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

Чем больше значение у этого свойства, тем быстрее элемент будет сжиматься по сравнению с соседями, имеющими меньшее значение.

Значение по умолчанию — 1. Значением может быть любое целое положительное число (включая 0).

Два предыдущих свойства работают с пропорциональным разделением пространства, не с конкретными размерами. Они довольно непростые, даже опытный разработчик не всегда знает, как они в точности работают. Загляните в конец статьи, если хотите подробнее почитать о каждом из них.

flex-basis

Свойство flex-basis указывает на размер элемента до того, как свободное место будет распределено (см. flex-grow).

Значением может быть размер в любых относительных или абсолютных единицах: 20rem , 5vw , 250px . А также можно использовать ключевое слово auto (значение по умолчанию). В этом случае при расчёте размера элемента будут приниматься во внимание значения свойств width , max-width , min-width или аналогичные свойства высоты, в зависимости от того, в каком направлении идёт основная ось.

Если никакие размеры не заданы, а свойству flex-basis установлено значение auto , то элемент занимает столько пространства, сколько нужно для отображения контента.

Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: flex-grow , flex-shrink и flex-basis . Первое значение является обязательным, остальные опциональны.

Значение по умолчанию: 0 1 auto , что расшифровывается как flex-grow: 0 , flex-shrink: 1 , flex-basis: auto .

align-self

При помощи этого свойства можно выровнять один или несколько элементов иначе, чем задано у родительского элемента. Например, в коде выше у родителя задано выравнивание вложенных элементов по верхнему краю родителя. А для элемента с классом .item мы задаём выравнивание по нижнему краю.

Ссылки

На практике

Егор Левченко

Во время работы стоит быть особенно внимательным со свойствами, которые меняют внешнее расположение элементов внутри flex-контейнера: например flex-direction: row-reverse или column-reverse , а также со свойством order .

Дело в том, что контент меняет своё расположение только визуально, CSS-свойствами, а значит, в теле сайта элементы окажутся в том порядке, в котором вы их расположили в HTML-файле. Позаботьтесь о людях, которые пользуются скринридерами, и не меняйте положение элементов на странице CSS-свойствами без крайней необходимости.

Цель крутого фронтендера — решать задачи бизнеса, а не писать много кода. Центрирование блока внутри родителя можно сократить до двух строк:

  1. Родителя сделать флекс-контейнером.
  2. Дочернему элементу задать margin: auto .

Ждём сокращения кода до одной строки =)

Алёна Батицкая

🛠 Раньше было затруднительно прижать футер к нижнему краю экрана вне зависимости от количества контента на странице. Приходилось идти на всякие ухищрения и городить костыли. Теперь с появлением флексов всё стало просто.

Оборачиваем всю страницу в блок, делаем его флекс-контейнером, внутрь вкладываем хэдер, мейн и футер. Родителю задаём flex-direction: column чтобы блоки встали друг под другом, а не в ряд, и min-height: 100vh , чтобы он занимал как минимум всю высоту экрана. Мейну задаём flex: 1 , и вуаля! Центральный блок страницы будет всегда растягиваться на всё доступное свободное пространство. Из-за этого футер всегда будет прижиматься к нижнему краю страницы. При этом, если контента в мейне будет больше чем на один экран, то он растянется и подстроится, ничего не сломается.

🛠 Частой проблемой в вёрстке до появления флексбоксов было вертикальное выравнивание блока внутри родителя. Использовались хаки с трансформом, отступами, высотой строки и прочие костыли.

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

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