order
Властивість order управляє порядком, в якому дочірні елементи з'являються всередині flex-контейнера. За замовчуванням вони розміщуються в тому порядку, як додані в flex-контейнер.
Значення
.flex-item { order: < ціле число>; }flex-елементи можуть бути переупорядковані за допомогою цієї простої властивості без зміни коду HTML.
Значення за замовчуванням: 0.
flex-grow
Ця властивість визначає коефіцієнт зростання, який визначає, наскільки flex-елемент буде збільшуватися щодо інших flex-елементів у flex-контейнері, при розподілі позитивного вільного простору.
Значення
<code data-language="css">.flex-item { flex-grow: <число>; }Якщо всі flex-елементи мають однакове значення flex-grow, всі елементи будуть мати однаковий розмір у контейнері.
>
Другий flex-елемент займає більше місця щодо розміру інших flex-елементів.
Значення за замовчуванням: 0.
Негативні числа неприпустимі.
flex-shrink
flex-shrink визначає коефіцієнт стиснення, який визначає, наскільки flex-елемент буде стискатися щодо інших flex-елементів у flex-контейнері, при розподілі негативного вільного простору .
Значення
.flex-item { flex-shrink: <число>; }За замовчуванням всі flex-елементи можуть бути стиснуті, але якщо ми встановимо значення flex-shrink нульовим (без стиснення), то елементи зберігають вихідний розмір.
Значення за замовчуванням: 1.
Негативні числа неприпустимі.
flex-basis
Ця властивість приймає ті ж значення, що і властивості width і height, і визначає початковий основний розмір flex-елемента, до того як вільне простір розподіляється відповідно до коефіцієнтів.
Значення
.flex-item { flex-basis: auto | <ширина>; }flex-basis вказано для четвертого flex-елемента і диктує його початковий розмір.
Значення за замовчуванням: auto.
flex
Ця властивість є скороченням для властивостей flex-grow, flex-shrink та flex-basis. Крім інших значень також можна встановити auto (1 1 auto) та none (0 0 auto).
Значення
.flex-item { flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }Значення за замовчуванням: 0 1 auto.
W3C рекомендує використовувати скорочену властивість flex замість окремих властивостей, оскільки flex правильно скидає будь-які невказані компоненти для типового використання.
align-self
Властивість align-self дозволяє перевизначити стандартне вирівнювання (або значення, вказане через align-items) для окремих flex-елементів. Для розуміння доступних значень зверніться до опису align-items для flex-контейнера.
Значення
.flex-item { align-self: auto | flex-start flex-end центр | Baseline | stretch; }Для третього та четвертого flex-елементів перевизначено вирівнювання через властивість align-self.
Значення за замовчуванням: auto.
Значення auto для align-self обчислюється як значення align-items батьківського елемента або stretch, якщо батько відсутній.
Примітки
Властивості float, clear і vertical-align не впливають на flex-елемент і не виривають його з потоку. також