flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった

CSSに用意されているレイアウト用プロパティdisplay:flexですがいままで未対応だったIE11のサポート終了にともないもっと気軽に使用することができるようになりました。

しかし、設定の仕方で意図しない見た目になることが多々あります。

今回はその中のひとつの問題の解決方法です。

現象）フレックスアイテム内の要素が折り返さない

前提は下記のようになります。

• 親要素がdisplay: flexで横並びに設定
• 子要素の一部にflex-basis: auto;が設定されている。そしてdisplay: flex; flex-wrap: wrapを指定する
• 孫要素のフレックスアイテムが自動改行されない。

問題）子要素にflex-basis:auto;があるとその中のflex-wrapが効かなくなる

プロパティflex-wrapはflexアイテムを勝手に改行してくれる機能です。

解決方法）flex-basis:autoをやめflex: 1 0 0%;のようにショートハンドで記入する

flex: 1 で指定しても大丈夫です。

flex: 1 で設定した場合は以下の処理と同等です

flex: 1 1 0

flex-basis: autoはflex:1の初期値ではないので注意してください。