Website-create.ru
Как много верстальщиков «сломало головы» при позиционировании элементов за все время активного развития сети Интернет!
Задачи из серии «расставить горизонтально три одинаковых (или разных) по ширине блока» или «позиционировать 2 блока по краям родительского, да еще и чтобы контент был центрирован по вертикали» отняли немало времени и нервов многих создателей веб страниц.
С стремительным появлением всевозможных девайсов ситуация только усугубилась. Ведь теперь сайты, созданные лишь для просмотра на десктопе никому не нужны. Страница должна одинаково хорошо отображаться на всех возможных устройствах (ну или как минимум на самых популярных).
Когда-то при верстке веб-страниц вообще использовались таблицы. Поверьте, в Интернете до сих пор полно таких сайтов.
Позиционирование при помощи float имеет немало «подводных камней» и может создать для верстальщика новые проблемы.
Свойство position: absolut также не обладает нужной гибкостью, ведь контент с данным свойством просто «выпадает» из общего потока.
Наверняка многие из вас являются поклонниками технологии Bootstrap, которая действительно легко решает многие проблемы позиционирования блоков (и не только). Однако не всегда есть возможность интегрировать ее в проект.
Сегодня речь пойдет о позиционировании FlexBox.
Если вы читаете этот паблик, то вероятно слышали о данной технологии, а возможно и пытались в ней разобраться.
Не важно по каким причинам вам это не удалось, сегодня мы рассмотрим FlexBox позиционирование так, что вы его полюбите и никогда уже больше не вспомните о float (разве что для обтекания текстом картинки).
Сразу небольшая оговорка. Я не буду рассказывать в этой статье о всех возможностях FlexBox — о них вы узнаете из последующих постов. Здесь мы раз и навсегда разберемся с позиционированием блоков. Вы увидите всю гибкость и бесспорные плюсы такого подхода.
Понимание Flex позиционирования
Для понимания Flex позиционирования будем использовать простейшую разметку.
Создадим div, который будет являться контейнером. Внутри него будут еще 4 div, каждый разного цвета. Так вы сможете все увидеть наглядно.
Зададим минимальные стили. Ширину и высоту для контейнера, а также высоту, ширину и цвет для внутренних элементов, чтобы их было видно.
Чтобы расставить элементы горизонтально, достаточно div с классом container прописать свойство display: flex.
Добавив всего одну строчку кода, мы получим нужный результат.
Расстояние между flex элементами
Мы добились того, что элементы расположились горизонтально и увидели, что сделать это очень просто.
Однако сейчас наши квадратики прилипли друг к другу. Давайте поговорим о распределении элементов и расстоянии между ними.
Для управления расстоянием между элементами используется css свойство justify-content.
Это свойство также применяется к блоку-контейнеру и может принимать следующие значения:
Выравнивание блоков в разметке Flexbox
Спецификация Выравнивание Блоков подробно описывает, как выравнивание работает при использовании различных способов разметки. На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox. Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, её следует читать вместе с основной страницей выравнивания блоков, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.
Основной пример
Оси и атрибут flex-direction
Выравнивание по Главной Оси
Выравнивание по Поперечной Оси
Отсутствие атрибута justify-self в разметке Flexbox
Это означает, что атрибут justify-self нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.
Использовать атрибут align-self имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.
Выравнивание и свойство margin: auto
Установив значение атрибута margin в auto для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством margin: auto не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.
Атрибуты разрыва
Создание разрыва фиксированного размера между элементами
На главной оси атрибут column-gap будет создавать разрывы фиксированного размера между соседними элементами.
Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.
Всё, что нужно знать о выравнивании во Flexbox
Об авторе: Рэйчел Эндрю — не только главный редактор журнала Smashing Magazine, но и веб-разработчик, писатель и спикер. Она автор ряда книг, в том числе The New CSS Layout, один из разработчиков системы управления контентом Perch. Пишет о бизнесе и технологиях на своём сайте rachelandrew.co.uk.
Краткое содержание: в этой статье мы рассмотрим свойства выравнивания во Flexbox и некоторые основные правила, как работает выравнивание по основной и поперечной осям.
История выравнивания во Flexbox
За всю историю CSS правильное выравнивание по обеим осям казалось самой сложной проблемой. Появление этой функции во Flexbox для многих стало главным преимуществом этой технологии. Выравнивание свелось к двум строчкам CSS.
Свойства выравнивания теперь полностью определены в спецификации Box Alignment. Она детализирует, как работает выравнивание в различных макетах. Это означает, что в CSS Grid можно использовать те же свойства, что и в Flexbox — а в будущем в других макетах тоже. Поэтому любая новая функция выравнивания Flexbox будет подробно описана в спецификации Box Alignment, а не в следующей версии Flexbox.
Свойства
Выравнивание главной оси с помощью justify-content
Обратите внимание, что свойство justify-content производит видимый эффект только при наличии свободного места. Поэтому если у вас набор элементов занимает всё пространство на главной оси, justify-content ничего не даст.
Вы можете поиграться со всеми значениями в демо.
Выравнивание по осям с помощью align-content
Затем я могу применить align-content с любым из значений.
Свойство по place-content
Выравнивание по осям с помощью align-items
Теперь мы знаем, что можно выровнять набор элементов или строки как группу. Тем не менее, есть ещё один способ выровнять элементы по отношению друг к другу на поперечной оси. У контейнера есть высота, которая определяется высотой самого высокого элемента.
Как вариант, её можно определить свойством height в контейнере:
Обратите внимание, что в многострочном контейнере каждая строка действует как новый контейнер. Самый высокий элемент в этой строке будет определять размер всех элементов в этой строке.
Значение flex-end перемещает их в конец контейнера по поперечной оси.
Мы также можем выровнять их по базовой линии. Это гарантирует выравнивание текста по одному основанию, в отличие от выравнивания полей вокруг текста.
Все эти варианты можно попробовать в демо.
Индивидуальное выравнивание с помощью align-self
Свойство align-items задаёт выравнивание всех элементов одновременно. В действительности оно устанавливает значения align-self для всех элементов группы. Можно также использовать свойство align-self для любого отдельного элемента, чтобы выровнять его внутри строки и относительно других элементов.
В следующем примере в контейнере используется align-items для выравнивания всей группы по центру, но также align-self для первого и последнего элементов.
Также может быть полезно подумать, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в grid-контейнере между grid-дорожками. Здесь тоже мы берём группу дорожек — и с помощью этих свойств распределяем между ними свободное пространство. Поскольку мы оперируем в группе и в Grid, и во Flexbox, то не можем взять отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ получить оформление макета, которое хотят верстальщики, когда говорят о свойстве self на главной оси. Это использование автоматических полей.
Использование автоматических полей на основной оси
Если вы когда-нибудь центрировали блок в CSS (например, враппер для контента главной страницы, установив поля слева и справа в auto ), то у вас уже есть некоторый опыт работы с автоматическими полями. Значение auto для полей заполняет максимальное пространство в установленном направлении. Для центрирования блока мы устанавливаем и левое, и правое поля в auto : каждое из них пытается занять как можно больше места, и поэтому помещает наш блок в центр.
Запасное выравнивание
В текущей спецификации вы не можете изменить запасное выравнивание. Есть примечание к спецификациям, которое допускает возможность указания произвольного запасного варианта в будущих версиях.
Безопасное и небезопасное выравнивание
Недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием ключевых слов safe и unsafe.
В следующем коде последний элемент слишком широк для контейнера, а при небезопасном выравнивании и гибком контейнере в левой части страницы элемент обрезается, поскольку переполнение выходит за границы страницы.
Безопасное выравнивание предотвращает потерю данных, перемещая переполнение на другую сторону.
Эти ключевые слова пока поддерживаются не всеми браузерами, однако демонстрируют, как спецификации Box Alignment добавляют контроля во Flexbox.
Заключение
Свойства выравнивания начинались со списка в Flexbox, но теперь обзавелись собственной спецификацией и применяются к другим контекстам макетирования. Вот несколько ключевых фактов, которые помогут запомнить их использование во Flexbox:
Выравнивание элементов во Flex контейнере
Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.
На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.
Свойства управления выравниванием
В этом руководстве рассматриваются следующие свойства:
Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.
Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.
Перекрёстная ось
Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.
Другие возможные значения свойства:
Выравнивание одного элемента при помощи align-self
Изменение основной оси
Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.
Выравнивание содержимого по перекрёстной оси — свойство align-content
До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.
Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.
Свойство align-content принимает следующие значения:
Попробуйте другие значения align-content для понимания принципа их работы.
Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.
Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.
В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.
Выравнивание содержимого по главной оси
Выравнивание и режим записи
Необходимо помнить, что при использовании свойств flex-start и flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.
Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.
Выравнивание и гибкое-направление
Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.
Использование авто отступов для выравнивания по главной оси
Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.
Будущие функции выравнивания для Flexbox
Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.
2.23. CSS flexbox
CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.
Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
Модуль flexbox позволяет решать следующие задачи:
Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.
Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton Flexbugs.
Что такое flexbox
Поддержка браузерами
1. Основные понятия
Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.
Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.
Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).
Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.
Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.
Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.
Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.
Рис. 2. Режим строки и колонки
2. Flex-контейнер
Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:
После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.
Рис. 3. Выравнивание элементов в модели flexbox
Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.
3. Flex-элементы
Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:
4. Порядок отображения flex-элементов и ориентация
Содержимое flex-контейнера можно разложить в любом направлении и в любом порядке (переупорядочение flex-элементов внутри контейнера влияет только на визуальный рендеринг).
4.1. Направление главной оси: flex-direction
Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется.
| flex-direction | |
|---|---|
| Значения: | |
| row | Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) оси строки (inline-axis). |
| row-reverse | Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого). |
| column | Направление сверху вниз. Flex-элементы выкладываются в колонку. |
| column-reverse | Колонка с элементами в обратном порядке, снизу вверх. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 4. Свойство flex-direction для left-to-right языков
4.2. Управление многострочностью flex-контейнера: flex-wrap
Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера.
По умолчанию flex-элементы укладываются в одну строку, вдоль главной оси. При переполнении они будут выходить за пределы ограничивающей рамки flex-контейнера. Свойство не наследуется.
| flex-wrap | |
|---|---|
| Значения: | |
| nowrap | Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо (в rtl справа налево). |
| wrap | Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево). |
| wrap-reverse | Flex-элементы переносятся на новые линии, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 5. Управление многострочностью с помощью свойства flex-wrap для LTR-языков
4.3. Краткая запись направления и многострочности: flex-flow
4.4. Порядок отображения flex-элементов: order
Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.
Рис. 6. Порядок отображения flex-элементов
5. Гибкость flex-элементов
Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.
5.1. Задание гибких размеров одним свойством: flex
W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.
5.2. Коэффициент роста: flex-grow
Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.
5.3. Коэффициент сжатия: flex-shrink
5.4. Базовый размер: flex-basis
| flex-basis | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. Элемент получает базовый размер, соответствующий размеру его содержимого (если он не задан явно). |
| content | Определяет базовый размер в зависимости от содержимого flex-элемента. |
| длина | Базовый размер определяется так же, как для ширины и высоты. Задается в единицах длины. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
6. Выравнивание
6.1. Выравнивание по главной оси: justify-content
6.2. Выравнивание по поперечной оси: align-items и align-self
6.2.1. Align-items
Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.
