Различия

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

--- flex [2023/09/21 20:07]
tro [align-content]
+++ flex [2023/09/21 20:19] (текущий)
tro [flex-shrink]
@@ Строка 70: / Строка 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 =====
 Для сортування / порядку / вага єлементу. Сортування від меньшого до більшого. Можна і мінусові значення.