Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update(CSS): web/css/flex-grow #3806

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions files/uk/web/css/flex-grow/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ browser-compat: css.properties.flex-grow

{{CSSRef}}

Властивість [CSS](/uk/docs/Web/CSS) **`flex-grow`** (флексбокс зростання) задає множник гнучкого зростання, який впливає на те, яка частина [**додатного вільного простору**](/uk/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) контейнера, якщо такий є, буде віддана [головному розмірові](/uk/docs/Learn/CSS/CSS_layout/Flexbox#hnuchka-model) цього елемента.
Властивість [CSS](/uk/docs/Web/CSS) **`flex-grow`** (флексбокс зростання) задає множник гнучкого зростання, який впливає на те, яка частина [**додатного вільного простору**](/uk/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) контейнера, якщо такий є, буде віддана [головному розмірові](/uk/docs/Learn_web_development/Core/CSS_layout/Flexbox#hnuchka-model) цього елемента.

Коли головний розмір гнучкого контейнера перевищує суму головних розмірів його гнучких елементів, цей додатний вільний простір може бути розподілений між гнучкими елементами, причому зростання кожного елемента пропорційно його множнику зростання відносно загальної суми множників зростання всіх гнучких елементів.

Expand Down Expand Up @@ -39,13 +39,13 @@ flex-grow: unset;

Ця властивість задає те, скільки вільного простору контейнера буде віддано цьому гнучкому елементу (множник зростання гнучкого елемента).

[Головний розмір](/uk/docs/Learn/CSS/CSS_layout/Flexbox#hnuchka-model) – це або ширина, або висота елемента, залежно від значення {{cssxref("flex-direction")}}.
[Головний розмір](/uk/docs/Learn_web_development/Core/CSS_layout/Flexbox#hnuchka-model) – це або ширина, або висота елемента, залежно від значення {{cssxref("flex-direction")}}.

Решта простору, також відома як додатний вільний простір, - це розмір гнучкого контейнера мінус розмір всіх гнучких елементів разом. Якщо у всіх сусідніх елементів один і той же множник зростання, то всі елементи отримають однакові частки вільного простору. Поширена практика – задавати `flex-grow: 1`, проте задання множника зростання для всіх гнучких елементів зі значенням `88`, `100`, `1.2` або будь-яким іншим, більшим за `0`, дасть один і той же результат: значення – це коефіцієнт співвідношення.
Решта простору, також відома як додатний вільний простір, це розмір гнучкого контейнера мінус розмір всіх гнучких елементів разом. Якщо у всіх сусідніх елементів один і той же множник зростання, то всі елементи отримають однакові частки вільного простору. Поширена практика – задавати `flex-grow: 1`, проте задання множника зростання для всіх гнучких елементів зі значенням `88`, `100`, `1.2` або будь-яким іншим, більшим за `0`, дасть один і той же результат: значення – це коефіцієнт співвідношення.

Якщо значення `flex-grow` відрізняються, то додатний вільний простір розподіляється згідно зі співвідношенням, визначеним різними множниками гнучкого зростання. Значення множників `flex-grow` усіх сестринських гнучких елементів додаються докупи. Додатний вільний простір гнучкого контейнера, якщо такий є, ділиться на цю суму. Головний розмір кожного гнучкого елемента, чиє значення `flex-grow` більше за `0`, зростає на цю частку, помножену на його власний множник зростання.

Наприклад, якщо чотири гнучкі елементи `100px` перебувають у контейнері `700px`, і ці елементи мають множники `flex-grow` зі значеннями `0`, `1`, `2` і `3` відповідно, тоді їхній сумарний головний розмір – `400px`, а залишається `300px` додатного вільного простору для розподілу. Є сума із 6 множників зростання (`3 + 2 + 1`), тому кожний множник зростання дорівнює `50px` (`(300px / 6 )`. Кожний гнучкий елемент отримує кількість додатного вільного простору, що дорівнює кількості вище, помноженій на його значення `flex-grow` – тобто `0`, `50px`, `100px` і `150px` відповідно. Маємо сумарні розміри гнучких елементів `100px`, `150px`, `200px` і `250px` відповідно.
Наприклад, якщо чотири гнучкі елементи `100px` перебувають у контейнері `700px`, і ці елементи мають множники `flex-grow` зі значеннями `0`, `1`, `2` і `3` відповідно, тоді їхній сумарний головний розмір – `400px`, а залишається `300px` додатного вільного простору для розподілу. Сума чотирьох множників зростання (`0 + 1 + 2 + 3 = 6`) дорівнює шести. Отже, кожний множник зростання дорівнює `50px` (`(300px / 6 )`. Кожний гнучкий елемент отримує 50px вільного простору, помножені на його значення `flex-grow` – тобто `0`, `50px`, `100px` і `150px` відповідно. Сумарними розмірами гнучких елементів стають `100px`, `150px`, `200px` і `250px` відповідно.

Властивість `flex-grow` здебільшого використовують поруч з іншими властивостями-скороченнями {{cssxref("flex")}} – {{cssxref("flex-shrink")}} і {{cssxref("flex-basis")}}. Радять використовувати властивість-скорочення `flex`, аби пересвідчитися, що всі значення задано.

Expand All @@ -61,7 +61,7 @@ flex-grow: unset;

### Задання множника зростання гнучкого елемента

У цьому прикладі сумарний множник зростання вісім розподіляється між шістьома гнучкими елементами, що означає, що кожен множник зростання становить `12,5%` від вільного простору.
У цьому прикладі сума шести множників гнучкого зростання дорівнює восьми, отже, значення кожного множника зростання `12,5%` від вільного простору.

#### HTML

Expand Down