参考にさせて頂いたページ
MDN
その他の記事
- CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
- 【CSS】Flexboxのプロパティ（flex-grow、flex-shrink、flex-basis、flex）を紹介します
はじめに
今回は、以下のようなことについてです。flexアイテムに設定するプロパティです。
- flexコンテナに空いた領域があるときに各flexアイテムが伸びる比率
- flexコンテナの大きさにflexアイテムが入りきらないときに各flexアイテムが縮む比率
- 伸縮していない状態のflexアイテムの幅または高さ
flex-growについて
flexコンテナに空いた領域があるときに各flexアイテムが伸びる比率です。 0を設定すると伸びません。
flex-shrinkについて
flexコンテナの大きさにflexアイテムが入りきらないときに各flexアイテムが縮む比率です。 flex-shrinkに0を設定すると、flex-basisで設定した値よりも縮まなくなります。 1以上の数値を設定したとき、flex-basisで設定した値よりも縮むようになります。
flexコンテナにflex-wrap: nowrap;を設定している場合は、コンテナよりもはみ出していきます。
flex-basisについて
伸縮していない状態のflexアイテムの幅または高さの設定です。
「flex-basis - CSS | MDN」によると、設定できる値の種類は非常に豊富なようです。
autoだとコンテンツが入りきる最小値になります。
flexについて
上記した3つのプロパティを設定できるショートハンドです。
それぞれの値の初期値は以下の通りです。
flex-grow: 0 flex-shrink: 1 flex-basis: auto
flexコンテナにrowが設定されているとき、flexアイテムにflex-basisを設定すると幅に適用されるようです。 flexコンテナにcolumnが設定されているとき、flexアイテムにflex-basisを設定すると高さに適用されるようです。
