Flex

flex-wrap

Исходная концепция flexbox — это контейнер для установки своих элементов в одну строку. Если flex-контейнер располагает свои элементы в одну или несколько строк, то свойство flex-wrap управляет направлением, в котором эти новые строки располагаются.


Значения

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

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

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

Значение по умолчанию: nowrap.

Эти свойства зависят от режима написания, поэтому в контексте rtl они будут соответственно перевёрнуты.

Как раньше работали с CSS-разметкой

Задача

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

Для начала я покажу, как решить эту задачу с помощью устаревших подходов.

1. Создаём div с двумя элементами

Например, и

Очевидно, что в больше текста.

Хакатон на Полярном круге 2.0

29 октября – 1 ноября, Салехард, беcплатно

tproger.ru

События и курсы на tproger.ru

Выделим цветом, чтобы его проще было отличить:

2. Размещаем обе секции рядом

Для этого напишем следующее:

Этот стиль разделяет доступное пространство в необходимых пропорциях и устанавливает для и .

Результат:

Два блока, расположенные рядом

Для тех, кто не знаком с : это относительно старый способ перемещения элементов влево или вправо.

Как видно на изображении выше, задача всё ещё не выполнена — высота боковой панели не совпадает с высотой основной зоны. Исправим это.

3. Используем трюк с display: table

Чтобы решить эту проблему, надо использовать .

Если вы с ним не знакомы, то вот что надо делать:

  1. Делаем родительский контейнер (в нашем случае элемент ) таблицей:
  2. Убираем и делаем дочерние элементы  и  ячейками таблицы:

Как только мы сделали это, задачу можно считать решенной. По крайней мере, так её решали раньше.

Оба блока теперь одинаковой высоты.

Двумерные макеты сайтов

Когда мы разбирали пример макета Святого Грааля, то использовали флексбоксы только для средней части, а шапку и подвал оставили блочными элементами. Мы применяли флексбоксы для размещения трёх флекс-элементов по горизонтали (в ряд), но не задавали флекс-элементы по вертикали (в колонку). Другими словами, у нас был одномерный макет. Несмотря на то, что страница в целом представляла собой двумерный макет, флексбоксы поддерживают макет только в одном из этих измерений.


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

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

Горизонтальный макет состоит из <nav>, <article> и <aside>. Все они содержатся во втором ряду, но их необходимо разместить горизонтально. Следовательно, мы можем сделать второй ряд флекс-контейнером и заставить его содержимое выстроиться в ряд.

Итак, вот рабочий пример.

<!doctype html> <title>Пример</title> <style> * { box-sizing: border-box; } body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; } #main { display: flex; flex: 1; } #main > article { flex: 1; } #main > nav, #main > aside { flex: 0 0 20vw; background: beige; } #main > nav { order: -1; } header, footer { background: yellowgreen; height: 20vh; } header, footer, article, nav, aside { padding: 1em; } </style> <body> <header>Шапка</header> <div id=»main»> <article>Статья</article> <nav>Навигация</nav> <aside>Боковая панель</aside> </div> <footer>Подвал</footer> </body>

В нашем случае мы использовали следующий код для элемента <body>.

display: flex делает <body> флекс-контейнером, а flex-direction: column отображает его флекс-элементы в колонку. Мы также задали минимальную высоту для внешнего флекс-контейнера, чтобы макет занимал всю высоту экрана.

А теперь для вложенного флекс-контейнера.

Добавление display: flex делает #main флекс-контейнером, подобно <body>. Теперь его дочерние элементы становятся флекс-элементами. flex: 1 гарантирует, что он будет расти так, чтобы занимать максимум доступного пространства.

Мы могли бы добавить flex-direction: row, чтобы явно указать направление, но в любом случае row является значением по умолчанию.

Остальное — просто стилизация и упорядочивание флекс-элементов во вложенном флекс-контейнере.

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

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

Вложенные флексбоксы против CSS Grid

Каждый раз, когда используете вложенные флекс-контейнеры, подумайте, не лучше ли вместо этого использовать CSS Grid. Он специально разработан для двумерных макетов, поэтому для создания таких макетов не требуется вложенность (хотя она поддерживается).

Тем не менее, существует много макетов, для которых лучше подходят флексбоксы, так что рассмотрим несколько случаев.

Задача 1

Первый пример будет посвящен тому, что мы создадим вот такое нестандартное решение.     Этот пример нестандартен тем, что мы создаем некую картинку, которая имеет форму отличную от квадрата и прямоугольника (это то, к чему мы привыкли). Безусловно, здесь не подходит метод, как если бы мы сохранили картинку при помощи png. Я думаю, что многие понимают, что если вы сделаете так, то этот текст не станет по краю, где обрезается эта картинка. Наша же цель, сделать такое обтекание текста, для нестандартной формы.   Сделаем HTML-разметку. Для начала создадим общий и назовем его . В нем создадим пустой с классом и с классом ,где будет наш текст. После этого переходим к CSS. Начнем со стилизации блока задав ему свойства высоты и ширины:

height: 100vh;
wight: 100vw;

Далее мы будем стилизовать . Устанавливаем цвет background-а и картинку:

background: black url(https://pp.userapi.com/c849120/v849120857/cc331/XftS2mpmwHo.jpg) center top no-repeat;

— устанавливаем изображение по центру; — устанавливаем изображение сверху по оси Y; — без повтора.   Устанавливаем высоту:

height: 100vh;

Используем ширину, но берем значение не , а например :

width: 40vw;

Растягиваем изображение по всему контейнеру:

background-size: cover;

Теперь давайте используем свойство к которому мы все привыкли:

float: right;

Дальше мы будем работать с 3 свойствами, с которыми вы, возможно, работаете очень редко, это: , и . Мы должны создать SVG при помощи CSS. Для этого нам необходимо создать многоугольник, его мы можем создать при помощи свойства , ему мы задаем координаты откуда и до куда должны вырисовываться отрезки для того что бы нарисовать этот многоугольник:

shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);

Создаем отступы:

shape-margin: 20px;

И последнее заключающее, что мы должны сделать, это использовать свойство , внутри которого мы используем те же значения , которые прописывали ранее:

clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);

 Ознакомиться подробнее с HTML и CSS можно тут:  

Свойство flex-flow

Свойство flex-flow является сокращением для свойств flex-direction и flex-wrap, поэтому вы можете указать их одновременно. Вот пример.

<!doctype html> <title>Пример</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; flex-flow: row-reverse wrap; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } .container > div { font-size: 5vw; padding: .5em; color: white; width: 60%; } body { margin: 0; } </style> <div class=»container»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

Свойство align-content

Свойство align-content похоже на justify-content, за исключением того, что align-content выравнивает вдоль поперечной оси.

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; flex-wrap: wrap; align-content: space-between; background-color: beige; height: 100vh; } .wrapper > div { padding: 10px; width: 60%; font-size: 4vw; color: white; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } body { margin: 0; } </style> <div class=»wrapper»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

Значение row

Это исходное значение, так что если вы не установите свойство flex-direction, именно это значение будет применяться.

<!doctype html> <title>Пример</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } .container > div { font-size: 5vw; padding: .5em; color: white; } body { margin: 0; } </style> <div class=»container»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>


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

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

Вот что произойдёт, если мы применим writing-mode: vertical-rl к приведённому выше примеру.

<!doctype html> <title>Пример</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; writing-mode: vertical-rl; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } .container > div { font-size: 5vw; padding: .5em; color: white; } body { margin: 0; } </style> <div class=»container»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

А вот что произойдёт, если мы добавим direction: rtl в этот пример.

<!doctype html> <title>Пример</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; writing-mode: vertical-rl; direction: rtl; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } .container > div { font-size: 5vw; padding: .5em; color: white; } body { margin: 0; } </style> <div class=»container»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

Сделаем ещё один шаг вперёд и добавим text-orientation: upright в этот пример. Вот что получилось.

<!doctype html> <title>Пример</title> <style> .container { display: flex; flex-direction: row; align-items: flex-start; background: beige; height: 100vh; writing-mode: vertical-rl; direction: rtl; text-orientation: upright; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } .container > div { font-size: 5vw; padding: .5em; color: white; } body { margin: 0; } </style> <div class=»container»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

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

Этот же принцип применим ко всем другим значениям flex-direction, показанных ниже.

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

order

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

flex-grow

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

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

Нельзя указывать отрицательные числа.

flex-shrink

Это свойство определяет возможность элемента уменьшаться в размере, при необходимости.

Нельзя указывать отрицательные числа.

flex-basis

Определяет размер элемента по умолчанию, до распределения оставшегося пространства. Это может быть длина (20%, 5rem и т.д.) или ключевое слово. Ключевое слово  означает «выглядеть как моё свойство  или «. Ключевое слово  означает что «размер основан на содержимом элемента» — это ключевое слово пока не очень хорошо поддерживается, поэтому его трудно проверить, а ещё труднее узнать что делают его братья ,  и .

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

flex

Это сокращение для ,  и . Второй и третий параметры ( и ) не обязательны. Значение по умолчанию установлено в .

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

align-self

Это свойство позволяет переопределить выравнивание по умолчанию (или заданное с помощью свойства ) для отдельных flex-элементов.

Пожалуйста посмотрите на объяснение свойства , чтобы понимать доступные значения.

Обратите внимание, что ,  и  не оказывают никакого влияния на flex-элемент

Примеры

Давайте начнём с самого простого примера, решающего задачу, которая возникает почти каждый день: идеальное центрирование. Не может быть ничего проще, если вы используете Flexbox.

Это зависит от того, что , установленный в  у flex-контейнера, поглощает дополнительное пространство. Таким образом, установка вертикального  в  у элемента, сделает элемент идеально центрированным по обеим осям.

Теперь давайте используем ещё несколько свойств. Рассмотрим список из 6 элементов, все с фиксированным размером в эстетическом отношении, но они могут быть автоматическими. Мы хотим, чтобы они были равномерно распределены вдоль горизонтальной оси и чтобы при изменении размера браузера всё было в порядке (без медиа-запросов!).

Готово! Всё остальное, это лишь некоторые проблемы дизайна. Ниже приведён пример на CodePen, обязательно зайдите туда и попробуйте изменить размер окон, чтобы посмотреть что произойдёт.

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

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

Свойства для Родителя (flex контейнер)

flex-direction

  • row (по умолчанию): слева направо в ltr; справа налево в rtl
  • row-reverse справа налево ltr; слева направо в rtl
  • column: так же, как и row но сверху вниз
  • column-reverse: то же самое, row-reverse но снизу вверх

flex-wrap

  • nowrap (по умолчанию): все flex элементы будут в одной строке
  • wrap: flex-элементы будут перенесены на несколько строк сверху вниз.
  • wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх.

здесь

justify-content

flex-start (по умолчанию): элементы сдвинуты в начало flex-direction направления.

flex-end: элементы сдвинуты ближе к концу flex направления.

start: элементы сдвинуты к началу writing-mode направления.

end: элементы сдвинуты в конце writing-mode направления.

left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.

right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.

center: элементы центрированы вдоль линии

space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки

space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них

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

space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.

space-betweenесть подробные графикиflex-startflex-endcentersafeunsafesafe

align-items

  • stretch (по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаются min-width / max-width)
  • flex-start / start / self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюдении flex-direction правил или writing-mode правил.
  • flex-end / end / self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюдении flex-direction или writing-mode правил.
  • center: элементы центрированы по поперечной оси
  • baseline: элементы выровнены, по их базовой линии

safeunsafeхотя это поддерживается не всеми браузерами

align-content

justify-contentПримечание

  • flex-start / start: элементы, сдвинуты в начало контейнера. Более поддерживаемый flex-start использует, flex-direction в то время как start использует writing-mode направление.
  • flex-end / end: элементы, сдвинуты в конец контейнера. Более поддерживаемый flex-end использует flex-direction в то время как end использует writing-mode направление.
  • center: элементы выровнены по центру в контейнере
  • space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце
  • space-around: элементы равномерно распределены с равным пространством вокруг каждой строки
  • space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство
  • stretch (по умолчанию): линии растягиваются, чтобы занять оставшееся пространство

safeunsafe

Свойство justify-content

Свойство justify-content выравнивает целиком всё содержимое флекс-контейнера по главной оси.

В этом примере мы используем значение space-between, что приводит к одинаковому промежутку между элементами, каждый из которых выровнен относительно своего края.

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; justify-content: space-between; background-color: beige; height: 100vh; } .wrapper > div { padding: 20px; font-size: 4vw; color: white; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } body { margin: 0; } </style> <div class=»wrapper»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

Свойство align-self

Свойство align-self выравнивает блок внутри содержащего его блока вдоль оси блока, оси колонки или перекрёстной оси.

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; align-items: center; background-color: beige; height: 100vh; } .wrapper > div { padding: 20px; font-size: 4vw; color: white; } .red { background: orangered; align-self: flex-start; } .green { background: yellowgreen; } .blue { background: steelblue; align-self: flex-end; } body { margin: 0; } </style> <div class=»wrapper»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

Здесь у красного флекс-элемента задано значение flex-start, а у синего значение flex-end. Это перемещает красный элемент в начало, а синий — в конец. Однако мы не установили значение для зелёного элемента. Поэтому он использует значение по умолчанию, которое в данном случае устанавливается как center с помощью align-items для флекс-контейнера.

Значения¶

Значение по-умолчанию:

Ключевое слово, означающее, что явная сетка макета не создается. Любые строки будут генерироваться неявно, и их размер будет определяться с помощью свойства . Является значением по умолчанию.
Задает размер строк, используя допустимое значение длины, или значение, указанное в процентах. Значение должно быть положительным.
Неотрицательное значение в «гибких» единицах измерения (fractional unit). Каждая строка занимает часть оставшегося пространства в контейнере сетки макета пропорционально заданному коэффициенту. Например, при использовании значения , строки будут занимать ⅓ и ⅔ оставшегося пространства, соответственно. Общий размер таких строк или столбцов вычитается из доступного пространства, что дает оставшееся пространство, которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту.
Значения между и имеют несколько особое поведение, когда сумма коэффициентов меньше , они будут занимать менее оставшегося пространства. Когда доступное пространство бесконечно (ширина или высота контейнера сетки макета неопределенны), размер строк сетки гибкого размера определяется их содержимым с сохранением соответствующих пропорций.
Значения flex не являются значениями length, по этой причине они не могут быть представлены или объединены с другими типами единиц в выражениях (функция выполняет математические расчеты для определения значений свойств).
Ключевое слово, которое задает размер каждой строки в зависимости от самого большого элемента в столбце.
Ключевое слово, которое задает размер каждой строки в зависимости от самого маленького элемента в столбце.
Функциональная нотация, определяющая диапазон размеров больше или равный и меньше или равный . Если меньше , то игнорируется, а функция обрабатывается как . Значение в «гибких» единицах измерения в качестве максимального значения задает коэффициент гибкости строки, это недопустимо для определения минимума.
Размер строк определяется размером контейнера и размером содержимого элементов в строке. Как максимум, идентичен значению , а как минимум, представляет самый большой минимальный размер. Автоматические размеры строк допускается растягивать с помощью свойств и .
Представляет собой формулу , которая рассчитывается по аналогии с (то есть ), за исключением того, что размер строки зажимается значением , если он больше, чем автоматический минимум.
Представляет из себя повторяющийся фрагмент списка строк, позволяя записать в более компактной форме большое количество строк с повторяющимся шаблоном. Возможные значения:
Устанавливает свойство в значение по умолчанию.
Указывает, что значение наследуется от родительского элемента.

margin

Вы по прежнему можете использовать margin для флекс-элементов. Вот пример применения margin: auto ко флекс-элементу, даже после того, как он был выровнен с помощью других свойств выравнивания.

<!doctype html> <title>Пример</title> <style> .wrapper { display: flex; align-items: center; justify-content: center; background-color: beige; height: 100vh; } .wrapper > div { padding: 20px; font-size: 4vw; color: white; } .red { background: orangered; align-self: flex-start; margin: auto; } .green { background: yellowgreen; } .blue { background: steelblue; align-self: flex-end; } body { margin: 0; } </style> <div class=»wrapper»> <div class=»red»>1</div> <div class=»green»>2</div> <div class=»blue»>3</div> </div>

flex-basis¶

Flex-контейнер может увеличиваться или уменьшаться вдоль своей центральной оси, например, при изменении размеров браузера, если контейнер имеет нефиксированные размеры. И вместе с контейнером также могут увеличиваться и уменьшаться его flex-элементы. Свойство определяет начальный размер flex-элемента до того, как он начнет изменять размер, подстраиваясь под размеры flex-контейнера.

Это свойство может принимать следующие значения:

  • : начальный размер flex-элемента устанавливается автоматически
  • : размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать
  • : мы можем установить конкретное числовое значение для размеров элемента

Например:

У первого элемента у свойства установлено значение . Поэтому первый элемент в качестве реального значения для ширины будет использовать значение свойства .

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

У третьего элемента свойство имеет конкретное значение, которое и используется. А свойство в этом случае уже не играет никакой роли.


С этим читают