flex-basisとwidth/heightの違い

flex-directionの向きによって、flex-basisの示すものが幅なのか高さなのか変わる

フロー方向に対する大きさになる

つまり、

row(横並び)なら、widthを意味するし、

column(縦並び)なら、heightを意味する

これが、flex-basisとwidth/heightの違いになる

仮に、動的にflex-directionを変えた時に、

flex-basisを指定していれば、

widthなのかheightなのかを気にする必要がないということ

それ以外に違いはない

flex-basisの代わりにwidthを指定してもちゃんと伸縮する

widthを指定すれば固定されそうな気もするがそんなことはないmrsekut.icon

固定したいなら、min-widthやflex-shrinkなどで指定する

一部例外があるらしい

In general, we can use width and flex-basis interchangeably in a Flex row, but there are some exceptions. For example, the width property affects replaced elements like images differently than flex-basis. Also, width can reduce an item below its minimum size, while flex-basis can't. ref

一般に、Flex行ではwidthとflex-basisを互換的に使用することができますが、いくつかの例外があります。例えば、widthプロパティは、flex-basisとは異なり、画像のような置換された要素に影響を与えます。また、widthはアイテムを最小サイズ以下に縮小することができますが、flex-basisはそうではありません。DeepL.icon