Различия

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

--- flex [2023/09/21 20:05]
tro [calc]
+++ flex [2023/09/21 20:19] (текущий)
tro [flex-shrink]
@@ Строка 35: / Строка 35: @@
 </code>
 ===== align-content =====
-Вирівнювання усього рядка
+Керує вирівнюванням усіх рядків багаторядкового контейнера уздовж cross axis, якщо є вільне місце. Аналогічно тому, як align-items вирівнює елементи в кожному рядку. Ця властивість не діє, коли є лише один рядок елементів або в контейнері немає вільного місця за вертикаллю (явно не задана висота більше, ніж контент).
+  * stretch — рядки рівномірно розтягуються, щоб зайняти все місце. Значення за замовчуванням.
+  * flex-start — рядки притискаються до старту cross axis.
+  * flex-end — рядки притискаються до кінця cross axis.
+  * center — рядки центруються на осі cross axis.
 <code>
 align-content: center;
@@ Строка 66: / Строка 70: @@
   * column-reverse — головна вісь розташовується вертикально, початок знизу, кінець зверху.
 ====== властивості флекс-єлементів ======
+=====flex-basis=====
+визначає початковий розмір flex-елемента у flex-контейнері. Для flex-елементів ця властивість має таку саму функцію, що і властивість width.
+<code>
+flex-basis: auto | значення
+</code>
 ===== flex-grow =====
-Дозволяє розтягувати єлементи якщо є місце
+Визначає здатність елемента займати більше місця (рости), ніж початковий розмір. Значення визначається як пропорція (частка) вільного місця в контейнері.
 <code>
 flex-grow: 0; //0 - утискаються, 1-розтягуются...можна 1000 - то це буде коєфіцієнт відносто того у кого меньше. Або 0.5
 </code>
-==== flex-shrink ====
+===== flex-shrink =====
-Дозволяє стискати єлементи
+На противагу властивості flex-grow, flex-shrink визначає здатність flex-елемента займати менше місця (стискатися), ніж його початковий розмір, тобто впливає на фінальний розмір елемента.
 <code>
 flex-shrink: 1; //1 - за замовчуванням дозволено утискатись, 0-розтягуются...можна 1000 - то це буде коєфіцієнт відносто того у кого меньше.
 </code>
+=====align-self=====
+дозволяє елементу змінити своє розташування на cross axis, перевизначивши собі значення властивості align-items від контейнера.
+align-self: auto | flex-start | flex-end | center | baseline | stretch
 ===== order =====
 Для сортування / порядку / вага єлементу. Сортування від меньшого до більшого. Можна і мінусові значення.
@@ Строка 84: / Строка 96: @@
 ====== Іньше ======
 ===== calc =====
-приймає як параметр математичний вираз, результат обчислення якого можна використовувати як значення CSS-властивості. Вираз може містити оператори +, -, *, / з використанням стандартних правил пріоритету.
+[[calc|calc]]
-<code>
-.item {
-  width: calc((100% - 20px) / 3);
-}
-</code>