Использовать только width для флексбокс сетки норм?

Question

[crdrads]

Какие последствия могут быть если для сетки использовать не flex-basis а старый добрый width?

Подсел на TailwindCSS а там из коробки идут только width. Можно конечно самому запилисть классы для регулировки ширины как у Буцтрапа, но стало интересно, а какая вообще нафиг разница?

Answer 1

[Ankhena]

Разницы не будет до тех пор, пока не повернете главную ось. Например, при адаптации к мобильным размерам.
В случае с шириной, указанное значение так шириной и останется. А в случае basis станет высотой.

Я обычно не меняю направление оси, а только изменяю width или basis. В случае с сеткой вероятнее всего будет также, но надо смотреть как устроена конкретная.
Т.е. вывод: если поворота главной оси нет, то без разницы.

Песочница для горизонтальной основной оси: https://jsfiddle.net/Ls3mdfa5/ В ней можно поэкспериментировать с разными shrink, grow и содержимым ячеек, при том, что у средней в одном случае width, в другом basis.

Answer 2

[Владислав Лысков]

В чем разница между flex-basis и width?

Comments

[crdrads]

Ок, гугл. Ну прочитал я. Там есть ответ на мой вопрос что будет если использовать только width для флексбокс сетки? Где?

[Владислав Лысков]

crdrads, ничего не будет, можешь и width не использовать
просто какой конкретный ответ ты хочешь получить?
что будет апокалипсис?

Answer 3

[Flying]

Разница в том что width определяет строго определённый размер элемента - его размер по оси X, тогда как flex-basis определяет размер элемента вдоль главной оси flexbox контейнера. В случае если flex-direction имеет значения row или row-reverse - разницы нет, а вот в случае если это свойство имеет значение column или column-reverse - разница принципиальная. Всё это есть в документации.