Различия

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

--- flex [2023/09/21 17:39]
tro
+++ flex [2023/09/21 20:19] (текущий)
tro [flex-shrink]
@@ Строка 7: / Строка 7: @@
   * стискати елементи, щоб запобігти переповненню.
 ====== властивості флекс-контейнер ======
+Надання тегу властивості флекс
+  * flex - блоковий
+  * inline-flex - рядково-блоковий
 <code>
 .wrap{
@@ Строка 12: / Строка 15: @@
 }
 </code>
-==== justify-content ====
+===== justify-content =====
-центрування
+центрування:
+  * flex-start — елементи притискаються до точки main-start головної осі. Це значення за замовчуванням.
+  * flex-end — елементи притискаються до точки main-end головної осі.
+  * center — елементи центруються на осі.
+  * space-between — елементи рівномірно розподіляються на головній осі. Перший елемент встановлюється на початок осі, а останній на кінець.
+  * space-around — елементи розподіляються рівномірно, але лівий та правий елементи розташовані на відстані від рамок контейнера на половину проміжку між іншими елементами.
+  * space-evenly — елементи розподіляються так, що відстань між елементами та від крайніх елементів до меж контейнера однакова.
 <code>
 justify-content: center;
 </code>
-==== flex-wrap====
+===== flex-wrap=====
-Переніс букв
+Переніс букв або єлементів. Дозволяє перетворити однорядковий контейнер на багаторядковий. Елементи будуть додаватися в рядок, доки в ньому буде місце, після чого буде автоматично створено ще один рядок.
+  * nowrap — усі елементи будуть на одному рядку. Це значення за замовчуванням.
+  * wrap — дозволяє елементам перестрибувати на інші рядки, які за замовчуванням розташовуються зверху вниз (уздовж cross axis).
+  * wrap-reverse — дозволяє елементам перестрибувати на інші рядки, які розташовуються знизу вгору (уздовж cross axis).
 <code>
 flex-wrap: wrap;
 </code>
-==== align-content ====
+===== align-content =====
-Вирівнювання усього рядка
+Керує вирівнюванням усіх рядків багаторядкового контейнера уздовж cross axis, якщо є вільне місце. Аналогічно тому, як align-items вирівнює елементи в кожному рядку. Ця властивість не діє, коли є лише один рядок елементів або в контейнері немає вільного місця за вертикаллю (явно не задана висота більше, ніж контент).
+  * stretch — рядки рівномірно розтягуються, щоб зайняти все місце. Значення за замовчуванням.
+  * flex-start — рядки притискаються до старту cross axis.
+  * flex-end — рядки притискаються до кінця cross axis.
+  * center — рядки центруються на осі cross axis.
 <code>
 align-content: center;
 </code>
-==== gap ====
+===== gap =====
 Указує відстань між єлементами флекс-конетнтк
+тільки по горизонталі
 <code>
-gap: 4;
+gap: 4px;
 </code>
-==== align-items====
+по горизонталі і вертикалі
-Вирівнювання єлеменів усередині флех
+<code>
+gap: 4px 5px;
+</code>
+===== align-items=====
+керує розташуванням елементів вздовж поперечної осі
+  * stretch — елементи розтягуються по всій довжині осі cross axis. Це значення за замовчуванням.
+  * flex-start — елементи притискаються до точки cross start.
+  * flex-end — елементи притискаються до точки cross end.
+  * center — елементи центруються по осі cross axis.
+  * baseline — елементи вирівнюються по базовій лінії їхнього текстового вмісту.
 <code>
 align-items: center;
+</code>
+===== flex-direction =====
+система розташування елементів в одному напрямку: горизонтально чи вертикально. Властивість flex-direction задає напрямок головної осі, а отже визначає напрямок елементів у контейнері.
+  * row — вісь починається зліва й закінчується праворуч. Це значення за замовчуванням.
+  * row-reverse — вісь починається праворуч й закінчується ліворуч.
+  * column — головна вісь стає вертикально, початок зверху та кінець знизу.
+  * column-reverse — головна вісь розташовується вертикально, початок знизу, кінець зверху.
+====== властивості флекс-єлементів ======
+=====flex-basis=====
+визначає початковий розмір flex-елемента у flex-контейнері. Для flex-елементів ця властивість має таку саму функцію, що і властивість width.
+<code>
+flex-basis: auto | значення
 </code>
-===== властивості флекс-єлементів =====
+===== flex-grow =====
+Визначає здатність елемента займати більше місця (рости), ніж початковий розмір. Значення визначається як пропорція (частка) вільного місця в контейнері.
-==== 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>
-==== order ====
+=====align-self=====
+дозволяє елементу змінити своє розташування на cross axis, перевизначивши собі значення властивості align-items від контейнера.
+align-self: auto | flex-start | flex-end | center | baseline | stretch
+===== order =====
 Для сортування / порядку / вага єлементу. Сортування від меньшого до більшого. Можна і мінусові значення.
 <code>
 order: 0; //0 - за замовчуванням як у html прописано.
 </code>
+====== Іньше ======
+===== calc =====
+[[calc|calc]]