Вивчайте Робота з елементами Flex

Свайпніть щоб показати меню

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

flex-basis

]flex-basis] визначає початковий розмір flex-елемента до розподілу додаткового простору. Може задаватися у px, %, em або auto (розмір залежить від вмісту).

flex-basis: auto | value;

index.html

index.css

flex-grow

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

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

index.html

index.css

order

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

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

index.html

index.css