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

Question

[Сергей Горячев]

Собственно, вопрос в сабже, иллюстрирую пример.



Работают оба варианта, в чем же отличие?

Answer 1

[Ольга Ветер]

Flex-basis задает начальный размер элемента относительно главной оси флекс-контейнера. В зависимости от направления оси может быть похожим и на width, и на height. Скорее даже на min-width и min-height. Меньше чем flex-basis элемент не будет, но может быть больше, в зависимости от размеров контейнера, окна...

Flex-basis дает гораздо больше возможностей для красивой адаптации макета на мобильные разрешения, например когда контейнер перестает быть row и становится column, или наоборот.

P.S. Как меня справедливо поправили ниже, flex-basis ведет себя не так как min-width/height в том случае, когда не помещается в контейнер, не "вылазит".

Comments

[Сергей Горячев]

Это и пугает. Допустим, есть у меня блоки 200х100 https://jsfiddle.net/webirus/k8zshvuy/ , перестраиваешь row на column и появляется странная хрень 100x200 https://jsfiddle.net/webirus/k8zshvuy/1/ . К этому конечно привыкать надо. Возможно, где-то и понадобится, но пока только вижу косяки.

[Ольга Ветер]

У базиса есть свойство auto, которое идет по умолчанию и ориентируется на содержимое элемента. Да и не базисом единым задается поведение блоков. Флексы - крутая штука. Могу посоветовать глянуть короткий обзор свойств в наглядных примерах https://www.youtube.com/playlist?list=PLqHlAwsJRxA... Возможно вы их полюбите :)

[Сергей Горячев]

Ольга Ветер: Я давно не против флексов, но использую только основные свойства расположения и выравнивания. Решил посмотреть новые свойства и вот задался вопросом про базис.

[Сергей]

Скорее даже на min-width и min-height. Меньше чем flex-basis элемент не будет,

Это не так. На самом деле может быть меньше, например, когда не помещается в контейнер.

[Ольга Ветер]

Сергей, да, тут вы правы

Answer 2

[WQP]

Вот тут подробный ответ - stackoverflow.com/questions/34352140/what-are-the-...

Comments

[Сергей Горячев]

Из этого рождается еще один вопрос) В чем разница между flex-basis и height) Получается, что просто одно свойство заменяет собой два. Без каких-то лишних заморочек.

[Ольга Ветер]

Sergey Goryachev: абсолютно не понятно из чего вы сделали такие выводы. Читайте внимательнее.

[Сергей]

Сергей Горячев, wp-kama.ru/id_8045/flex-v-css.html/comment-page-1#...