Различия

Показаны различия между двумя версиями страницы.

--- css:flexbox [2022/08/18 05:45] – [justify-content] so_v_a
+++ css:flexbox [2026/08/06 09:04] (текущий) – so_v_a
@@ Строка 1: / Строка 1: @@
+<!DOCTYPE markdown>
 # Шпаргалка по Flexbox CSS
 Вся документация по свойству flex находится на [официальном сайте](https://www.w3.org/TR/css-flexbox-1/#flex-containers).
 ## display
@@ Строка 11: / Строка 12: @@
 **Применяется** ко: всем элементам.
+| | |
+| :--: |:-------|
 |flex    |Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.|
 |inline-flex    |Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.|
-## flex-direction
+## Свойства контейнера
+### flex-direction
   * row
@@ Строка 21: / Строка 27: @@
   * column-reverse
-Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.
+Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута **dir** у контейнера.
 **Применяется** к: flex контейнерам.
+| | |
+| :--: |:-------|
 |row    |Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.|
 |row-reverse    |Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.|
@@ Строка 30: / Строка 38: @@
 |column-reverse    |Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.|
-## flex-wrap
+### flex-wrap
   * nowrap
@@ Строка 41: / Строка 50: @@
 **Значение по умолчанию**: nowrap.
+| | |
+| :--: |:-------|
 |nowrap    |Флексы выстраиваются в одну линию.|
 |wrap    |Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.|
 |wrap-reverse    |Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.|
-## flex-flow
+### flex-flow
   * row nowrap
@@ Строка 56: / Строка 67: @@
 **Применяется** к: flex контейнерам.
 **Значение по умолчанию**: row nowrap.
-## order
-  * -1
-  * 0
-  * 1
-Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.
-**Применяется** к: flex элементам.
+### justify-content
-**Значение по умолчанию**: 0.
-## justify-content
-  *
   * flex-start
   * flex-end
@@ Строка 82: / Строка 86: @@
 **Значение по умолчанию**: flex-start.
+| | |
+| :--: |:-------|
 |flex-start    |Флексы прижаты к началу строки.|
 |flex-end    |Флексы прижаты к концу строки.|
@@ Строка 89: / Строка 96: @@
 |space-evenly    |Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.|
+### align-items
-## align-items
   * flex-start
@@ Строка 103: / Строка 109: @@
 **Значение по умолчанию**: stretch.
+| | |
+| :--: |:-------|
 |flex-start    |Флексы выравниваются в начале поперечной оси контейнера.|
 |flex-end    |Флексы выравниваются в конце поперечной оси контейнера.|
@@ Строка 108: / Строка 116: @@
 |baseline    |Флексы выравниваются по их базовой линии.|
 |Stretch    |Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.|
+### align-content
+  * flex-start
+  * flex-end
+  * center
+  * space-between
+  * space-around
+  * space-evenly
+  * stretch
+Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.
+**Применяется** к: flex контейнеру.
+**Значение по умолчанию**: stretch.
+| | |
+| :--: |:-------|
+|flex-start    |Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.|
+|flex-end    |Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.|
+|center    |Строки располагаются по центру контейнера.|
+|space-between    |Строки равномерно распределяются в контейнере и расстояние между ними одинаково.|
+|space-around    |Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.|
+|space-evenly    |Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк.|
+|stretch    |Строки равномерно растягиваются, заполняя свободное пространство.|
+## Свойства элементов
+### align-self
+  * flex-start
+  * flex-end
+  * center
+  * baseline
+  * stretch
+Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.
+**Применяется** кo: flex элементам.
+**Значение по умолчанию**: auto.
+| | |
+| :--: |:-------|
+|flex-start    |Элемент выравнивается в начале поперечной оси контейнера.|
+|flex-end    |Элемент выравнивается в конце поперечной оси контейнера.|
+|center    |Элемент выравнивается по центральной линии на поперечной оси.|
+|baseline    |Элемент выравнивается по базовой линии текста.|
+|Stretch    |Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.|
+### flex-grow
+  * 0
+  * 1
+Свойство flex-grow задает коэффициент роста flex для заданного числа. Отрицательное значение невалидно.
+**Применяется** к: flex элементам.
+**Значение по умолчанию**: 0.
+### flex-shrink
+  * 0
+  * 1
+Свойство flex-shrink задает коэффициент сжатия flex с заданным числом. Отрицательное значение не валидно.
+**Применяется** к: flex элементам.
+**Значение по умолчанию**: 1.
+### flex-basis
+  * 30%
+  * 50%
+  * content
+Свойство flex-basis определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.
+**Применяется** к: flex элементам.
+**Значение по умолчанию**: auto.
+### flex
+**flex** - это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.
+**Применяется** к: flex-элементам, в том числе в потоке микроэлементов
+**Значение по умолчанию**: как и у каждого из подсвойств этого свойства:
+  * flex-grow: 0
+  * flex-shrink: 1
+  * flex-basis: auto
+Примеры синтаксиса:
+```css
+/* 0 0 auto */
+flex: none;
+/* Одно значение, число без единиц: flex-grow */
+flex: 2;
+/* Одно значение, ширина/высота: flex-basis */
+flex: 10em;
+flex: 30%;
+flex: min-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;
+```
+### order
+  * -1
+  * 0
+  * 1
+Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.
+**Применяется** к: flex элементам.
+**Значение по умолчанию**: 0.