Как делать флекс

Как создать сетку на странице. CSS-свойство flex

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

Синтаксис

Значения свойства flex

• flex-grow
• flex-shrink
• flex-basis
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-self
• order

Разберём значения на примерах.

Flex-grow

Значение flex-grow определяет, как элементы будут растягиваться внутри контейнера, когда есть свободное пространство. flex-grow может принимать целые или дробные числовые значения и по умолчанию равно 0 . Если задать flex-grow значение больше нуля, то флекс-элемент растянется на всё оставшееся во флекс-контейнере свободное пространство.

.container < display: flex; >.item-puppy < flex-grow: 0; >.item-cat

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

.container < display: flex; >.item-puppy < flex-grow: 1; >.item-cat

Flex-shrink

Значение flex-shrink отвечает за гибкость и сжатие элементов, когда доступное пространство ограничено. Принимает числовое значение, которое указывает, какую долю свободного пространства элемент займёт при сжатии относительно других элементов в контейнере. По умолчанию равно 1 .

Все флекс-элементы по умолчанию могут сжиматься, если после определения размеров выяснилось, что места во флекс-контейнере не хватает. Если один элемент имеет flex-shrink: 2 , а другие — flex-shrink: 1 , первый элемент будет сжиматься в два раза больше остальных. В целом значение flex-shrink используется достаточно редко. Если в микросетке большое количество элементов, то обычно сразу включают многострочный флекс-контейнер, чтобы элементы не деформировались.

.container < display: flex; >.item-puppy < flex-shrink: 2; >.item-cat < flex-shrink: 1; >.item-corgi

Flex-basis

Свойство flex-basis задает начальный размер элемента перед распределением доступного пространства. Можно указать значение в px , mm или в процентах вдоль главной оси. Значение по умолчанию — auto .

Свойство flex-basis сильнее width и height , оно их переопределит, если встретится с ними на одном и том же флекс-элементе.

.container < display: flex; >.item-puppy < height: 220px; width: 220px; flex-basis: 300px; >.item-cat < height: 220px; width: 220px; >.item-corgi

Flex-direction

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

Можно указать одно из четырех значений:

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

.container

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

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

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

.container

Flex-wrap

Свойство flex-wrap определяет, должны ли элементы переноситься на новую строку или оставаться на одной. Имеет три значения — nowrap , wrap , wrap-reverse .

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

.container < display: flex; flex-direction: row; flex-wrap: nowrap; >.blue < height: 220px; width: 220px; background: #4b9eb3; >.item-puppy < height: 220px; width: 220px; background-image: url(./images/puppy.jpg); >.pink < height: 220px; width: 220px; background: #e78830; >.item-cat < height: 220px; width: 220px; background-image: url(./images/cat.jpg); >

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

.container < display: flex; flex-direction: row; flex-wrap: wrap; >.blue < height: 220px; width: 220px; background: #4b9eb3; >.item-puppy < height: 220px; width: 220px; background-image: url(./images/puppy.jpg); >.pink < height: 220px; width: 220px; background: #e78830; >.item-cat < height: 220px; width: 220px; background-image: url(./images/cat.jpg); >.green < height: 220px; width: 220px; background: #4bb381; >.item-corgi < height: 220px; width: 220px; background-image: url(./images/corgi.jpg); >

wrap-reverse — значение работает аналогично wrap , но элементы будут переноситься на следующую строку или столбец в обратном порядке. Например, если в flex-direction указано row , элементы будут переноситься на новую строку справа налево.

.container < display: flex; flex-direction: row; flex-wrap: wrap-reverse; >.blue < height: 220px; width: 220px; background: #4b9eb3; >.item-puppy < height: 220px; width: 220px; background-image: url(./images/puppy.jpg); >.pink < height: 220px; width: 220px; background: #e78830; >.item-cat < height: 220px; width: 220px; background-image: url(./images/cat.jpg); >.green < height: 220px; width: 220px; background: #4bb381; >.item-corgi < height: 220px; width: 220px; background-image: url(./images/corgi.jpg); >

Justify-content

Свойство justify-content распределяет элементы вдоль главной оси контейнера.

У свойства есть ряд значений:

flex-start — значение по умолчанию, оно указывает, что флекс-элементы выровнены по началу главной оси контейнера. Если основная ось направлена горизонтально, то элементы будут выравниваться слева, а если ось направлена вертикально, то элементы будут выравниваться сверху.

.container

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

.container

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

.container

space-between указывает, что флекс-элементы равномерно распределены вдоль главной оси контейнера. Первый элемент будет выровнен в начале оси, а последний элемент — в конце. Промежутки между элементами будут распределены равномерно.

.container

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

.container

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

.container

Align-items

Свойство align-items определяет выравнивание элементов вдоль поперечной оси контейнера.

align-items имеет несколько значений:

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

.container

flex-end — флекс-элементы выровнены по концу поперечной оси контейнера.

.container

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

.container

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

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

Align-self

Свойство align-self определяет выравнивание отдельного элемента вдоль поперечной оси контейнера. Это свойство задаётся флекс-элементу, а не флекс-контейнеру, и имеет такие же значения, как свойство align-items .

.container < display: flex; flex-direction: column; align-items: baseline; >.item-puppy < height: 220px; width: 220px; background-image: url(./images/puppy.jpg); align-self: center; >

Order

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

.container < display: flex; >.item:first-child < order: 2; >.item:last-child

Нюансы использования

• Свойство flex работает только для элементов, у которых значение свойства display установлено на flex .
• Если элементы не помещаются в одну строку или колонку из-за ограничений ширины или высоты контейнера, используется свойство flex-wrap со значением wrap , чтобы элементы переносились на новую строку или колонку.
• Расположение элементов в HTML-файле не имеет решающего значения. Порядок элементов можно поменять в CSS.
• Если нужно задать порядок отображения элементов, можно использовать свойство order , где меньшее значение будет помещать элемент ближе к началу контейнера.
• Множество языков в мире используют написание справа налево rtl (right-to-left), в отличие от привычного ltr (left-to-right). Флекс адаптирован для этого. В нем есть понятие начала и конца, поэтому в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.

�� Актуальная информация о поддержке браузерами свойства flex на caniuse.

Материалы по теме

• Как изменить ширину элемента. Свойство width
• Как передвинуть элемент на странице. CSS-свойство position
• Флексы для начинающих

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Вот как это работает:

Что всё это значит

Первые два свойства просто немного меняют вид ссылки.

Свойство color: maroon; меняет цвет текста в тегах на темно-красный.

Свойство text-decoration: none; убирает подчеркивание. Есть и другие варианты text-decoration — мы писали о них отдельно.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому работаем с CSS-анимацией. Так, свойство transform: scale(1.2); срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Свойство transition: transform 0.3s ease; используется для создания плавного перехода между состояниями элемента. В нашем случае увеличение будет происходить в течение 0.3 секунд с использованием функции времени ease для более плавного начала и конца анимации.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

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

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

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

Синтаксис

.my-element

• 10 июля 2023

Как верстать и оформлять цитаты

�� Не используйте тег для других видов текста — перевода или шутки, так как это не семантично.

• 22 июня 2023

Создание флексбоксов

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

У нас есть широкий красный флекс-элемент, за ним идут маленький зелёный и маленький синий элементы.

Вот соответствующий код из этого примера.

.container

Мы включаем display: flex , чтобы объявить внешний элемент флекс-контейнером. Это всё что нужно, чтобы начать использовать флексбоксы. Теперь все дочерние элементы этого флекс-контейнера автоматически становятся флекс-элементами и, следовательно, размещаются с учётом модели флекс-вёрстки.

Но вы, наверное, заметили, что красный элемент шире двух остальных. Это потому, что мы применили к этому элементу flex-grow: 1 . Вот код, который мы для этого использовали.

Свойство flex-grow устанавливает коэффициент роста флекс-элемента, который определяет, насколько элемент будет вырастать относительно других флекс-элементов (после распределения свободного пространства).

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

Добавление содержимого

Вы наверное удивились, почему мы просто не установили ширину красного элемента с помощью свойства width? Да, мы могли бы это сделать, но в таком случае я не смог бы показать вам следующий фрагмент…

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

Вот что я имел в виду, когда говорил, что коэффициент роста определяет, насколько элемент будет расти после распределения свободного пространства. Добавив больше содержимого к синему элементу, мы эффективно удалили доступное свободное пространство и красному элементу некуда стало расти.

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

Изменение ширины

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

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

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

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

См. также

• display
• display в CSS
• flex-grow
• height
• width
• Абсолютное позиционирование
• Блочные элементы
• Высота и ширина в CSS
• Использование в вёрстке
• Макет сайта на флексбоксах
• Описание float
• Открываем блочную модель
• Поток
• Примеры использования float
• Размеры
• Размеры блока
• Свойства flex-элементов
• Спойлер
• Строчно-блочные элементы
• Строчные элементы
• Точки между слов

Гайд по 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
   8. gap
   1. order
   2. flex-grow
   3. flex-shrink
   4. flex-basis
   5. flex
   6. align-self
   7. Ссылки
   1. Андрей Захаров советует
   2. Егор Левченко советует
   3. Алёна Батицкая советует
   1. Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?

   Контрибьюторы:

   • Егор Левченко ,
   • Светлана Коробцева ,
   • Дмитрий Приходько ,
   • Дима Шелков

   Обновлено 8 марта 2023

   Что это?

   Скопировать ссылку «Что это?» Скопировано

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

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

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

   Скопировать ссылку «Основные термины» Скопировано

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

   

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

   

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

   

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

   

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

   Скопировать ссылку «Свойства флекс-контейнера» Скопировано

   display

   Скопировать ссылку «display» Скопировано

    .container  display: flex;> .container  display: flex; >    Скопировать Скопировано Не удалось скопировать   

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

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

    .container  display: inline-flex;> .container  display: inline-flex; >    Скопировать Скопировано Не удалось скопировать   

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

   flex — direction

   Скопировать ссылку «flex-direction» Скопировано

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

    .container  display: flex; flex-direction: row;> .container  display: flex; flex-direction: row; >    Скопировать Скопировано Не удалось скопировать   

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

   

   

   flex — flow

   Скопировать ссылку «flex-flow» Скопировано

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

    .container  display: flex; flex-flow: column wrap;> .container  display: flex; flex-flow: column wrap; >    Скопировать Скопировано Не удалось скопировать   

    .container  display: flex; flex-flow: row nowrap;> .container  display: flex; flex-flow: row nowrap; >    Скопировать Скопировано Не удалось скопировать   

   

   flex — grow

   Скопировать ссылку «flex-grow» Скопировано

    .container  display: flex;> .item  flex-grow: 1;> .container  display: flex; > .item  flex-grow: 1; >    Скопировать Скопировано Не удалось скопировать   

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

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

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

   flex — shrink

   Скопировать ссылку «flex-shrink» Скопировано

    .container  display: flex;> .item  flex-shrink: 3;> .container  display: flex; > .item  flex-shrink: 3; >    Скопировать Скопировано Не удалось скопировать   

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

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

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

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

   flex — basis

   Скопировать ссылку «flex-basis» Скопировано

    .container  display: flex;> .item  flex-basis: 250px;> .container  display: flex; > .item  flex-basis: 250px; >    Скопировать Скопировано Не удалось скопировать   

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

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

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

   flex

   Скопировать ссылку «flex» Скопировано

    .container  display: flex;> .item  flex: 1 1 auto;> .container  display: flex; > .item  flex: 1 1 auto; >    Скопировать Скопировано Не удалось скопировать   

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

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

    /* 0 0 auto */flex: none; /* Одно значение, число без единиц: flex-grow */flex: 2; /* Одно значение, ширина/высота: flex-basis */flex: 10em;flex: 30px;flex: auto;flex: content; /* Два значения: flex-grow | flex-basis */flex: 1 30px; /* Два значения: flex-grow | flex-shrink */flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; /* Глобальные значения */flex: inherit;flex: initial;flex: unset; /* 0 0 auto */ flex: none; /* Одно значение, число без единиц: flex-grow */ flex: 2; /* Одно значение, ширина/высота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значения: flex-grow | flex-basis */ flex: 1 30px; /* Два значения: flex-grow | flex-shrink */ flex: 2 2; /* Три значения: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Глобальные значения */ flex: inherit; flex: initial; flex: unset;    Скопировать Скопировано Не удалось скопировать   

   align — self

   Скопировать ссылку «align-self» Скопировано

    .container  display: flex; align-items: flex-start;> .item  align-self: flex-end;> .container  display: flex; align-items: flex-start; > .item  align-self: flex-end; >    Скопировать Скопировано Не удалось скопировать   

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

   Ссылки

   Скопировать ссылку «Ссылки» Скопировано

   1. Как реально работает flex — grow
   2. Как реально работает flex — shrink
   3. Песочница Флексбоксов
   4. Game: Flexbox Froggy
   5. Game: Flexbox Defense
   6. Game: Flexbox Ducky
   7. Курс по Флексбоксам от Wes Bos

   Flex — CSS: Адаптивность сайта

   В курсе про Flex много говорилось про то, что модуль помогает разработчикам адаптировать сайты для мобильных устройств. Мы рассмотрим подходы, которые позволят быстро адаптировать сайт под использование на мобильных устройствах. Главными нашими помощниками станут два свойства, о которых шла речь в курсе про Flex — это flex и flex-wrap .

   Как и в прошлом уроке, для примера возьмем три блока, которые расположены в одну строку. В отличие от урока про резиновую верстку, выставим ширину каждого блока в 266.66px . Другими словами, сделаем фиксированную ширину блоков:

   .container  width: 800px; > .section  display: flex; > .section .item  flex: 0 0 266.66px; > 

   Что случится с такими элементами, если разрешение будет меньше 800 пикселей по ширине? Появится горизонтальная прокрутка. Это не очень очевидно для пользователя, поэтому он может упустить важную информацию на нашей странице.

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

   Такую катастрофу можно предотвратить, если воспользоваться правилом flex-wrap . Оно подскажет браузеру перенести элементы, которые не помещаются в контейнер. Добавим это правило в селектор .container и посмотрим, как станет выглядеть наш блок при ширине 500px :

   .section  display: flex; flex-wrap: wrap; > 

   Отличный результат! Мы переместили на вторую строку блок, который в прошлый раз был скрыт. В некоторых ситуациях одного правила flex-wrap достаточно, чтобы flex-элементы подстраивались под разрешение экрана.

   Кроме flex-wrap , нам может помочь еще и правило flex . Свойство flex объединяет в себе три свойства:

   • flex-grow
   • flex-shrink
   • flex-basis

   Чтобы блоки вели себя адаптивно и «резиново», нужно разрешить элементам сжиматься по необходимости и занимать свободное пространство, если оно доступно. Базовую ширину мы задаем через свойство flex-basis — выставим там значение 266.6px . Мы разрешаем блокам сжиматься и занимать свободное пространство, поэтому здесь flex-basis — это значение по умолчанию:

   .section .item  flex: 1 1 266.66px; > 

   Теперь посмотрим на поведения блоков в трех различных разрешениях:

   • 800 пикселей по ширине
   • 600 пикселей по ширине
   • 400 пикселей по ширине

   Открыть доступ

   Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

   • 130 курсов, 2000+ часов теории
   • 1000 практических заданий в браузере
   • 360 000 студентов

   Наши выпускники работают в компаниях:

   Похожие публикации:

   1. Как открыть aliexpress com вместо aliexpress ru
   2. Как прочитать файл js
   3. Как создать контейнер
   4. Какие виды алгоритмов вы знаете