Базисный размер
Классы basis-* задают flex-basis — исходный размер флекс-элемента вдоль
основной оси: долей контейнера, процентом или ключевым словом. Берите их, когда
элементы строки должны делить ширину в заданной пропорции.
Пример
Доли
Доля считается от ширины контейнера. Подпись над образцом — классы элементов строки.
basis-1/2
basis-1/3 · basis-2/3
basis-1/4 ×4
basis-5/12 · basis-7/12
basis-full
Проценты
basis-1 … basis-100 задают процент ширины контейнера с шагом в один процент.
basis-10
basis-25
basis-50
basis-75
basis-100
auto, 0 и px
С grow оба элемента забирают свободное место. При basis-auto они
начинают с ширины своего текста, поэтому длинный остаётся шире; при basis-0
начинают с нуля и получают поровну.
grow basis-auto
grow basis-0
basis-px
Ширина экрана
С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину
окна просмотра: на узком экране элементы идут по одному в строку, с ширины md
— по два, а во втором образце с ширины lg — по четыре.
Классы
| Класс | CSS | Значения |
|---|---|---|
basis-auto |
flex-basis: auto |
— |
basis-1/1 |
flex-basis: 100% |
— |
basis-1/2 |
flex-basis: 50% |
— |
basis-1/3 |
flex-basis: 33.333333% |
— |
basis-2/3 |
flex-basis: 66.666667% |
— |
basis-1/4 |
flex-basis: 25% |
— |
basis-2/4 |
flex-basis: 50% |
— |
basis-3/4 |
flex-basis: 75% |
— |
basis-1/5 |
flex-basis: 20% |
— |
basis-2/5 |
flex-basis: 40% |
— |
basis-3/5 |
flex-basis: 60% |
— |
basis-4/5 |
flex-basis: 80% |
— |
basis-1/6 |
flex-basis: 16.666667% |
— |
basis-2/6 |
flex-basis: 33.333333% |
— |
basis-3/6 |
flex-basis: 50% |
— |
basis-4/6 |
flex-basis: 66.666667% |
— |
basis-5/6 |
flex-basis: 83.333333% |
— |
basis-1/12 |
flex-basis: 8.333333% |
— |
basis-2/12 |
flex-basis: 16.666667% |
— |
basis-3/12 |
flex-basis: 25% |
— |
basis-4/12 |
flex-basis: 33.333333% |
— |
basis-5/12 |
flex-basis: 41.666667% |
— |
basis-6/12 |
flex-basis: 50% |
— |
basis-7/12 |
flex-basis: 58.333333% |
— |
basis-8/12 |
flex-basis: 66.666667% |
— |
basis-9/12 |
flex-basis: 75% |
— |
basis-10/12 |
flex-basis: 83.333333% |
— |
basis-11/12 |
flex-basis: 91.666667% |
— |
basis-full |
flex-basis: 100% |
— |
basis-px |
flex-basis: 1px |
— |
basis-0 |
flex-basis: 0 |
— |
basis-{значение} |
flex-basis: {значение}% |
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100 |
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:basis-auto.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
- Доли
basis-1/2…basis-11/12— для раскладок по колонкам: половины, трети, четверти, шестые и двенадцатые части. - Проценты
basis-1…basis-100— когда нужной доли нет в шкале. basis-auto— размер берётся изwidthили из содержимого.basis-0вместе сgrowделит свободное место поровну, не глядя на содержимое; то же делаетflex-1.basis-fullиbasis-1/1— вся ширина контейнера: элемент занимает отдельную строку в контейнере с переносом.
Колонки с переносом
Базис работает вместе с flex-wrap: элементы с basis-full встают по одному,
а с префиксом ширины — по несколько в строку.
<div class="flex flex-wrap">
<div class="basis-full md:basis-1/2 lg:basis-1/3">Карточка</div>
<div class="basis-full md:basis-1/2 lg:basis-1/3">Карточка</div>
<div class="basis-full md:basis-1/2 lg:basis-1/3">Карточка</div>
</div>
Ограничения
- Базис — исходный размер, а не итоговый. Если
flex-shrinkразрешает сжатие, а места не хватает, элемент станет уже; еслиflex-growразрешает рост — шире. Сумма долей вместе сgapбольше ширины контейнера, поэтому элементы сbasis-1/2и промежутком между ними сжимаются. - Во флекс-контейнере с
flex-colбазис задаёт высоту, а не ширину. basis-0не делает элемент уже его минимального содержимого: длинное слово или картинка удерживают ширину.