![Полное руководство по CSS Flex + опыт использования](https://losper.net/uploads/monthly_2022_06/hy2oqjvsbk60ef92nktg.png.e85f10da83f6ba0ababc6b326ed6ac3a.png)
Полное руководство по CSS Flex + опыт использования
Полное руководство по CSS Flex + опыт использования
![f1772f3a4c02a8975d7767f4d19b5e56.gif](https://habrastorage.org/getpro/habr/upload_files/f17/72f/3a4/f1772f3a4c02a8975d7767f4d19b5e56.gif)
Как и CSS Grid, Flex Box довольно сложен, потому что состоит из двух составляющих: контейнера и элементов внутри него.
Когда я начал изучать Flex, я хотел увидеть все, на что он способен. Но мне не удалось найти подробное руководство с примерами всех возможностей. Поэтому я решил самостоятельно создать диаграммы свойств Flex с «высоты птичьего полета».
![Это все, на что способен Flex. Это все, на что способен Flex.](https://habrastorage.org/getpro/habr/upload_files/514/4c3/a9b/5144c3a9b885321082479774cc7263fa.png)
Но… давайте рассмотрим каждую диаграмму отдельно. К концу этого руководства по Flex вы узнаете обо всех его возможностях.
CSS Flex или Flex Box
Flex — это набор правил для автоматического растягивания нескольких столбцов и строк внутри родительского контейнера.
display:flex
В отличие от многих других свойств CSS, в Flex есть основной контейнер и вложенные в него элементы. Некоторые свойства CSS-Flex относятся только к контейнеру. А другие можно применить только к элементам внутри него.
![1d821401866e8cef280a35d97de7a8fe.png](https://habrastorage.org/getpro/habr/upload_files/1d8/214/018/1d821401866e8cef280a35d97de7a8fe.png)
Вы можете думать о flex-элементе как о родительском контейнере со свойством display: flex. Элемент, помещенный в контейнер, называется item. Каждый контейнер имеет границы начала(flex-start) и конца гибкости(flex-end), как показано на этой диаграмме.
Горизонтальная (main) и вертикальная (cross) оси
Хотя список элементов представлен линейно, необходимо обращать внимание на строки и столбцы. По этой причине Flex включает в себя координатные оси. Горизонтальная ось называется main-axis, а вертикальная — cross-axis.
Чтобы управлять шириной содержимого контейнера и промежутками между элементами, которые растягиваются вдоль main-axis, необходимо использовать Justify-content. Для управления вертикальными изменениями элементов необходимо использовать align-items.
Если у вас есть 3 столбца и 6 элементов, Flex автоматически создаст вторую строку для размещения оставшихся элементов. Если у вас в списке более 6 элементов, будут созданы дополнительные строки.
![ff1b3b8751ebd0a542cb35d3ec308231.png](https://habrastorage.org/getpro/habr/upload_files/ff1/b3b/875/ff1b3b8751ebd0a542cb35d3ec308231.png)
По умолчанию, элементы Flex равномерно распределяются внутри контейнера по горизонтальной оси. Мы рассмотрим различные свойства и значения.
![Вы можете определять количество столбцов. Вы можете определять количество столбцов.](https://habrastorage.org/getpro/habr/upload_files/1dd/7cf/0c9/1dd7cf0c9abe53117ba49e830a539000.png)
Распределение строк и столбцов внутри родительского элемента определяется свойствами CSS Flex flex-direction, flex-wrap и некоторыми другими, которые будут продемонстрированы дальше.
![:У нас есть произвольное n-количество элементов, расположенных в контейнере. По умолчанию элементы растягиваются слева направо. Однако направление можно изменить. :У нас есть произвольное n-количество элементов, расположенных в контейнере. По умолчанию элементы растягиваются слева направо. Однако направление можно изменить.](https://habrastorage.org/getpro/habr/upload_files/82c/abe/adb/82cabeadb31458cd6e141c3c5a46fce1.png)
Direction
Можно задать направление движения элементов (по умолчанию слева направо).
![e941b246c53e96565ef7c20ad7dad546.png](https://habrastorage.org/getpro/habr/upload_files/e94/1b2/46c/e941b246c53e96565ef7c20ad7dad546.png)
flex-direction: row-reverse изменяет направление движения списка элементов. По умолчанию стоит значение row, что означает движение слева направо.
Wrap
![f564d51c7ab92822c06a52f725503020.png](https://habrastorage.org/getpro/habr/upload_files/f56/4d5/1c7/f564d51c7ab92822c06a52f725503020.png)
flex-wrap: wrap определяет перенос элементов на другую строку, когда в родительском контейнере заканчивается место.
Flow
![ba6787fe6418db24bddb94e151053708.png](https://habrastorage.org/getpro/habr/upload_files/ba6/787/fe6/ba6787fe6418db24bddb94e151053708.png)
flex-flow включает в себя flex-direction и flex-wrap, что позволяет определять их с помощью одного свойства.
Примеры:
-
flex-flow: row wrap определяет значения flex-direction как row и flex-wrap как wrap.
![2977db46ebac7f10a7b9a0180fb8110c.png](https://habrastorage.org/getpro/habr/upload_files/297/7db/46e/2977db46ebac7f10a7b9a0180fb8110c.png)
-
flex-flow:row wrap-reverse (перенос элементов вверх)
![59da3b6c7838b2bf728dff27f636a375.png](https://habrastorage.org/getpro/habr/upload_files/59d/a3b/6c7/59da3b6c7838b2bf728dff27f636a375.png)
-
flex-flow:row wrap (стандартный перенос элементов); justify-content: space-between (пробел между элементами);
![cc6d6b1b7544c935333d6b9167c3d89e.png](https://habrastorage.org/getpro/habr/upload_files/cc6/d6b/1b7/cc6d6b1b7544c935333d6b9167c3d89e.png)
-
flex-flow: row-reverse wrap (направление движения справа налево со стандартным переносом сверху вниз)
![d961fae00cabfb1bd8cef70099d45575.png](https://habrastorage.org/getpro/habr/upload_files/d96/1fa/e00/d961fae00cabfb1bd8cef70099d45575.png)
-
flex-flow: row-reverse wrap-reverse (направление движения справа налево и обратный перенос элементов);
![673d63867820a6c9bd669ad229be5ad6.png](https://habrastorage.org/getpro/habr/upload_files/673/d63/867/673d63867820a6c9bd669ad229be5ad6.png)
-
flex-flow: row wrap; justify-content: space-between; (стандартный перенос и направление; расстояние между элементами)
![0a27d79b592d2be3873457e757fe3894.png](https://habrastorage.org/getpro/habr/upload_files/0a2/7d7/9b5/0a27d79b592d2be3873457e757fe3894.png)
Направление можно изменить, чтобы сделать вертикальную ось главной.
![5994e8ca1ff6339dd223751e38b543cd.png](https://habrastorage.org/getpro/habr/upload_files/599/4e8/ca1/5994e8ca1ff6339dd223751e38b543cd.png)
Когда мы меняем flex-direction на column, свойство flex-flow ведет себя точно так же, как и в предыдущих примерах. За исключением wrap-reverse, когда элементы переносятся снизу вверх.
![59454bee2e3a5481ce928246eae5375e.png](https://habrastorage.org/getpro/habr/upload_files/594/54b/ee2/59454bee2e3a5481ce928246eae5375e.png)
justify-content
![b545cecf100faa8a31af1ec5a60068de.png](https://habrastorage.org/getpro/habr/upload_files/b54/5ce/cf1/b545cecf100faa8a31af1ec5a60068de.png)
Я получил много просьб прояснить приведенный выше пример. Для этого я создал анимацию:
![Анимированные возможности justify-content. Анимированные возможности justify-content.](https://habrastorage.org/getpro/habr/upload_files/4b2/5eb/4b4/4b25eb4b4c8b031e2bd813d6f1d28e1a.gif)
Надеюсь, эта CSS-анимация поможет лучше понять работу justify content.
Свойства следующие:flex-direction:row; justify-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly. В этом примере мы используем только 3 элемента в строке.
Нет никаких ограничений на количество элементов, которые можно использовать в Flex. Эти диаграммы демонстрируют только поведение элементов, когда одно из перечисленных значений применяется к свойству justify-content .
![То же свойство justify-content используется для выравнивания элементов, когда flex-direction: column. То же свойство justify-content используется для выравнивания элементов, когда flex-direction: column.](https://habrastorage.org/getpro/habr/upload_files/865/8b2/561/8658b256194dead439b2547e69f60e7a.png)
Packing Flex Lines (согласно спецификации Flex)
![e966852b285aaadaa5cac859156c7079.png](https://habrastorage.org/getpro/habr/upload_files/e96/685/2b2/e966852b285aaadaa5cac859156c7079.png)
Я не уверен, реализовано ли это в каком-либо браузере, но когда-то это было частью спецификации CSS-flex и, вероятно, стоит упомянуть об этом для полноты картины.
В спецификации Flex это называется «Packing Flex Lines». По сути, это работает так же, как в примерах выше. Однако стоит обратить внимание, что интервал расположен между целыми группами элементов. Это полезно, когда вы хотите создать зазоры между группами.
![Packing Flex Lines, но теперь с flex-direction: column Packing Flex Lines, но теперь с flex-direction: column](https://habrastorage.org/getpro/habr/upload_files/8d5/a74/ee8/8d5a74ee8bcc42c4df87842ae3e3ffcf.png)
align-items
![d14db16f5e18523c881a23486b9ede8f.png](https://habrastorage.org/getpro/habr/upload_files/d14/db1/6f5/d14db16f5e18523c881a23486b9ede8f.png)
align-items контролирует выравнивание элементов по горизонтали относительно родительского контейнера.
flex-basis
![55b82ab2dd9b267557e8c02e46e39c6e.png](https://habrastorage.org/getpro/habr/upload_files/55b/82a/b2d/55b82ab2dd9b267557e8c02e46e39c6e.png)
flex-basis работает аналогично другому свойству CSS: min-width. Оно увеличивает размер элемента в зависимости от содержимого. Если свойство не задействуется, то используется значение по умолчанию.
flex-grow
![94e50bec2b4cadb65bda0f35e4fbec8c.png](https://habrastorage.org/getpro/habr/upload_files/94e/50b/ec2/94e50bec2b4cadb65bda0f35e4fbec8c.png)
flex-grow применяется к конкретному элементу и масштабирует его относительно суммы размеров всех других элементов в той же строке, которые автоматически корректируются в соответствии с заданным значением свойства. В примере значение flex-grow для элементов было установлено на 1, 7 и (3 и 5) в последней строке.
flex-shrink
![c38c0e66a43df8f6b84d5a37f8003455.png](https://habrastorage.org/getpro/habr/upload_files/c38/c0e/66a/c38c0e66a43df8f6b84d5a37f8003455.png)
flex-shrink — это противоположность flex-grow. В примере значение flex-shrink равно 7. При таком значении размер элемента равен 1/7 размера окружающих его элементов (размер которых автоматически скорректирован).
![cc7094d75ee03959a426af93a8309a8a.png](https://habrastorage.org/getpro/habr/upload_files/cc7/094/d75/cc7094d75ee03959a426af93a8309a8a.png)
При работе с отдельными элементами можно использовать только одно свойство из трёх: flex-grow , flex-shrink или flex-base.
order
Используя свойство order , можно изменить естественный порядок элементов.
![5bf372ca43fe484dcbfa01feb64a0993.png](https://habrastorage.org/getpro/habr/upload_files/5bf/372/ca4/5bf372ca43fe484dcbfa01feb64a0993.png)
justify-items
![62af433526d3b5f0b698bb0113c5f0ac.png](https://habrastorage.org/getpro/habr/upload_files/62a/f43/352/62af433526d3b5f0b698bb0113c5f0ac.png)
И последнее, что нужно для тех, кто хочет использовать CSS Grid вместе с Flex Box... justify-items в CSS Grid похожи на justify-content в Flex. Свойства, описанные на приведенной выше диаграмме, не будут работать в Flex, но в значительной степени эквивалентны сетке для выравнивания содержимого ячеек.
Рекомендуемые комментарии
Комментариев нет
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.