Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

display:flexの学習 その0001-03 flexアイテムの伸縮比率とベース幅 flex-grow、flex-shrink、flex-basis、flexについて

参考にさせて頂いたページ

MDN

その他の記事

はじめに

今回は、以下のようなことについてです。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を設定すると高さに適用されるようです。