# Learn Flexbox before 2025 ends

## Метаданные

- **Канал:** Frontend Basics
- **YouTube:** https://www.youtube.com/watch?v=dmgyIssp8l0

## Содержание

### [0:00](https://www.youtube.com/watch?v=dmgyIssp8l0) Segment 1 (00:00 - 05:00)

Здравствуйте! В этом видео мы изучим Flexbox. Мы начнём с основных понятий и будем постепенно углубляться в детали. Если вы уже знакомы с основами, можете перейти к разделу о сжатии и увеличении. Давайте начнём с основ. Чтобы включить FlexLayout, просто добавьте свойство `displayFlex` к элементам-контейнерам. В FlexLayout есть две оси: основная и поперечная. Чтобы изменить направление основной оси, используйте свойство `Direction`. Вы можете задать основную ось четырьмя разными способами: для строк слева направо — это поведение по умолчанию; для строк справа налево — обратное; для столбцов сверху вниз и снизу вверх — обратное. Чтобы настроить выравнивание элементов вдоль основной оси, используйте свойство `justifyContent`. Есть шесть вариантов. `FlexStart` выравнивает элементы по началу основной оси — это значение по умолчанию, которое сдвигает элементы к концу основной оси; `Center` центрирует элементы вдоль основной оси; `spaceBet` размещает равное расстояние между элементами; ` spaceEqually` равномерно распределяет пространство между элементами; `spaceStart` размещает равное расстояние вокруг элементов с одним крестиком в начале и конце и двумя крестиками между элементами; ` justifyContent` Отвечает за основную ось, а для управления поперечной осью мы используем свойство «Выравнивание элементов». Существует пять распространенных вариантов: по умолчанию — « Растягивание», при котором элементы увеличиваются, заполняя высоту контейнера, при условии, что высота элементов не задана; второй вариант — «Гибкий старт», который выравнивает элементы по началу поперечной оси; «Гибкий старт» выравнивает элементы по концу поперечной оси; «Центрирование» центрирует элементы вдоль поперечной оси; «Базовая линия» выравнивает элементы так, чтобы их базовые линии TT совпадали. Если вы установите выравнивание элементов на «Базовая линия», вы можете сначала не заметить никакой разницы. Это может выглядеть так же, как «Гибкий старт», но если вы увеличите размер элемента, вы увидите эффект. Выравнивание по основанию гарантирует, что текст во всех элементах идеально выровнен внизу. В некоторых случаях «Базовая линия» — лучший выбор. Представьте себе заголовок на сайте электронной коммерции с названием бренда и навигационными ссылками. Если вы используете элемент «Центрирование», что-то может выглядеть не по центру. Переключившись на « Базовую линию», текст выравнивается более естественно, даже если название бренда не идеально центрировано. Как вы думаете, какой вариант лучше — «Центрирование» или «Базовая линия»? Дайте мне знать в комментариях. У нас было всего три элемента, и они прекрасно поместились в контейнере. Но что произойдет, если мы увеличим их количество до 10? Возникают два вопроса: почему все элементы в одном ряду, даже если у нас есть место, и почему размер каждого элемента меньше 200, хотя я установил этот размер, специально предупредив вас, что так делать нельзя? Сначала разберемся с проблемой одного ряда. Здесь вступает в действие свойство `flex rep`. По умолчанию его значение равно ` no rep`, то есть все элементы останутся в одном ряду. Когда мы изменим значение на `rep`, элементы могут переместиться на следующую строку, если в текущем ряду больше нет места. В режиме `rep` у вас есть несколько строк или основная ось для управления ими. Вы используете свойство `Align content`. Значение по умолчанию — `normal`. Другие значения работают аналогично `Align items`, но управляют всем контейнером. Например, ` flex start` переместит все элементы в начало, удаляя лишнее пространство; `flex end` переместит все элементы в конец; `center` центрирует все элементы. Вы также можете использовать ` space between`, `space around` или `space EV`. Если вы хотите, чтобы элементы занимали все доступное пространство, не задавайте им свойство `height` и используйте `value`. Выравнивание содержимого позволяет дать элементу немного свободного пространства. Вы можете использовать свойство Gap, и даже установить разные зазоры для строк и столбцов, если у вас несколько строк. Следующий раздел крайне важен для истинного понимания Flexbox. Мы обсудим рост Flexbox, сжатие Flexbox, базовые значения Flexbox и то, как элементы ведут себя в различных сценариях. Вот где начинается самое интересное. Ранее, когда мы установили ширину каждого элемента равной 200 и увеличили количество элементов до 10, мы увидели, что элементы уменьшились. В Flexbox больше не было 200 белых элементов. Существует два типа размеров: первый — идеальный размер. Это желаемый размер, но он не гарантирован. Когда я устанавливаю ширину элемента равной 200, я как бы говорю: «О, может быть, алгоритм Xbox сделает этот элемент шириной 200 пикселей, если это возможно, конечно». Второй размер — минимальный размер. Это наименьший размер, до которого элемент может уменьшиться. Алгоритм Flexbox гарантирует, что элемент не уменьшится. Если я увеличу количество элементов до 50, вы заметите две вещи: во-первых, элементы больше не помещаются в строку и выходят за ее пределы, и во-вторых, каждый элемент имеет странную ширину, основанную на его Это происходит потому, что алгоритм Flexbox определяет минимальный размер для каждого элемента, предотвращая его дальнейшее уменьшение сверх допустимого размера. Теперь давайте узнаем о свойстве FlexShrink. Это свойство указывает алгоритму, насколько должен уменьшиться элемент по сравнению с другими. Если вы добавите значение два к первому элементу, он уменьшится в два раза сильнее, чем остальные. Если вы зададите очень большое число, например, миллион, алгоритм уменьшит этот элемент первым, прежде чем остальные. Да, на самом деле, другие тоже уменьшатся, но в миллион раз меньше. Если вы установите FlexShrink равным нулю, элемент вообще не уменьшится и сохранит свой идеальный размер. Итак, где можно использовать FlexShrink? Представьте себе информационный блок с фиксированной шириной, иконкой размером 24 пикселя и текстом. Вы выравниваете

### [5:00](https://www.youtube.com/watch?v=dmgyIssp8l0&t=300s) Segment 2 (05:00 - 07:00)

элементы по центру. Если текст короткий, все в порядке, но если текст длинный, иконка начинает уменьшаться, что является распространенной проблемой, с которой вы можете столкнуться. Чтобы исправить это, просто добавьте FlexShrink ноль к иконке, и она сохранит свой идеальный размер. Теперь, когда мы рассмотрели FlexShrink, перейдем к FlexGrow. Он работает аналогично, но вместо уменьшения он контролирует рост элементов. Допустим, у вас есть боковая панель и контент. Если вы хотите, чтобы контент заполнял оставшееся пространство в разделе или оглавлении, добавьте свойство FlexGrow к разделу контента. Если есть лишнее пространство, этот элемент займет его, поскольку он никому другому не нужен. Если у другого элемента, например, у боковой панели, также есть свойство FlexGrow, будет произведен расчет минимального значения. Допустим, есть 300 пикселей лишнего пространства. Алгоритм проверяет, есть ли у каких-либо дочерних элементов свойство FlexGrow. В данном случае их два. Он суммирует их значения FlexGrow: 1 + 2 равно 3. Затем он делит лишнее пространство на общее, поэтому 300, разделенное на 3, равно 100 пикселям. Наконец, он умножает каждое значение на 100 пикселей, поэтому боковая панель получает 200, а контент — 100. Хорошо, давайте поговорим о Flex Bases и закончим наше видео. Мы знаем, что основная и поперечная оси могут изменяться в зависимости от свойства направления Flex. С помощью Flex Bases вы можете задать только размер элемента основной оси: строка или столбец. Направление: если направление строковое, Flex Bases X используется в качестве свойства WID; если направление столбцовое, высоты. Если заданы и ширина, и базовые значения (flex bases), то приоритет отдается базовым значениям (Flex bases). То же самое относится и к высоте в направлении столбцов. Если установить базовые значения (Flex bases) равными нулю, это означает, что идеальный размер — это минимальный размер. Однако, если добавить свойство Flex grow, оставшееся пространство будет разделено между элементами, чтобы разделить размер контейнера на равные части. Вы можете использовать эти два свойства. Существует также сокращенная запись для этого, называемая Flex one. С помощью свойства flex вы можете задать значения grow, shrink и bases только в одной строке. При использовании Flex one свойство grow будет равно единице, свойство shrink — нулю, и базовые значения (flex bases) также будут равны нулю. О макетах Flex еще многое предстоит узнать, но лучший способ понять их — это практика.

---
*Источник: https://ekstraktznaniy.ru/video/38319*