Как работает свойство flex-basis?

Question

[torbach]

Здравствуйте! Помогите, пожалуйста, разобраться со свойством flex-basis. Необходимо задать ширину дочернего, розового блока этим свойством.
При flex-direction: row, все работает ширина меняется.
(200px)


(500px)


Но, стоить изменить у родительского блока flex-direction на column, как сразу у розового блока увеличивается высота, ширина не меняется.


Подскажите, как задавать ширину у флексов при адаптивной верстке вне зависимости от свойства flex-direction?

https://codepen.io/Ramov/pen/LYrpLvz

Comments

[Алексей Дубровин]

https://developer.mozilla.org/en-US/docs/Web/CSS/f...

Answer 1

[Ankhena]

Подскажите, как задавать ширину у флексов при адаптивной верстке вне зависимости от свойства flex-direction?

Вы, наверное, удивитесь, но есть такое свойство width

А flex-basis тогда для чего нужен?

Это базовый размер вдоль главной оси флексбокса.
Т.е. если главная ось идет по горизонтали, то это ширина.
А если мы повернули главную ось (с помощью flex-direction) и ось теперь стала вертикальной, то размер вдоль неё стал высотой.

Это может быть нужно, например, при смене ориентации дисплея.

Если вам в любых условиях нужна именно ширина, то используйте width.

p.s.
Обратите внимание, что при этом оси нельзя называть вертикальной и горизонтальной.
Из названия остаются: main (главная) и cross (поперечная).
И flex-direction меняет направление главной оси.

Comments

[torbach]

А flex-basis тогда для чего нужен?

[Сергей delphinpro]

тут скорее justify-content:stretch уместнее будет.

torbach при изменении направления у вас оси меняются местами.
при row flex-basic действует по горизонтали, при column - по вертикали.
при это при row высота блока определяется содержимым (предполагаю, что у вас justify-content: center), а при column – ширина блока определяется содержимым (оси поменялись, помните?).
можете сделать justify-content:stretch чтобы выровнять блоки по поперечной оси.
или отдельно задавать width при direction: column

[torbach]

Сергей delphinpro, спасибо!

[Ankhena]

torbach,

А flex-basis тогда для чего нужен?

Это базовый размер вдоль главной оси флексбокса.
Т.е. если главная ось идет по горизонтали, то это ширина.
А если мы повернули главную ось (с помощью flex-direction) и ось теперь стала вертикальной, то размер вдоль неё стал высотой.

Это может быть нужно, например, при смене ориентации дисплея.

Если вам в любых условиях нужна именно ширина, то используйте width.

[torbach]

Ankhena, спасибо!

[Ankhena]

torbach, обратите внимание, что при этом оси нельзя называть вертикальной и горизонтальной.
Из названия остаются: main (главная) и cross (поперечная).
И flex-direction меняет направление главной оси.