Властивості Flex-Елементів

Flex-елементи є дочірніми елементами для flex-контейнера. Вони більше не є вбудованими елементами або блочними елементами. Отже, ми можемо змінювати властивості елементів, щоб отримати правильне позиціонування.

flex-basis

Властивість flex-basis визначає початковий розмір flex-елемента до того, як буде розподілено решту простору. Вона визначає ідеальний розмір flex-елемента, який може бути скоригований залежно від доступного простору та інших властивостей flex-контейнера.

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

flex-grow

Властивість flex-grow визначає здатність flex-елемента рости відносно інших елементів у flex-контейнері, коли є надлишок вільного місця.

Властивість flex-grow приймає значення без одиниці, що означає відносний розмір flex-елемента порівняно з іншими елементами. Наприклад, якщо один елемент має значення flex-grow 2, а інший - 1, то перший елемент виросте вдвічі більше, ніж другий, коли у flex-контейнері буде надлишок місця.

order

Властивість order використовується для визначення порядку відображення flex-елементів у їхньому контейнері. За замовчуванням flex-елементи відображаються в тому порядку, в якому вони з'являються в HTML-документі. Однак ми можемо змінити цей порядок за допомогою властивості order.

Значення order може бути будь-яким числом. Навіть якщо у нас є лише 3 елементи, присвоєння order: 1000; для другого елемента не означає, що у нас буде 1000 елементів. Це просто означає, що другий елемент буде розміщено на останній позиції. Крім того, якщо кілька елементів мають однакове значення order, браузер розташує їх у тому порядку, в якому вони з'являються в HTML-документі. Давайте змінимо order елементів у наступному списку. Завдання полягає в тому, щоб розмістити третій елемент на першій позиції.