Гнучка основа - CSS-хитрощі

Anonim

flex-basisВластивість є суб-властивість модуля Flexible Box Layout.

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

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

Синтаксис

flex-basis: .flex-item ( flex-basis: 100px; )

Зверніть увагу, що як і для будь-якої ширини, від’ємні довжини недійсні.

Демо

Перевірте цю ручку!

Підтримка браузера

  • (сучасний) означає останній синтаксис із специфікації (наприклад display: flex;)
  • (гібрид) означає непарний неофіційний синтаксис 2011 року (наприклад display: flexbox;)
  • (старий) означає старий синтаксис 2009 року (наприклад display: box;)
Chrome Сафарі Firefox Опера IE Android iOS
21+ (сучасний)
20- (старий)
3,1+ (старий) 2-21 (старий)
22+ (новий)
12,1+ (сучасний) 10+ (гібрид) 2,1+ (старий) 3,2+ (старий)

Браузер Blackberry 10+ підтримує новий синтаксис.

Для отримання додаткової інформації про змішування синтаксисів, щоб отримати найкращу підтримку браузера, зверніться до цієї статті (CSS-хитрощі) або цієї статті (DevOpera).