flexboxで固定+リキッドレイアウト

いよいよ実務で使われだした感のあるflexboxプロパティ。
横並びが”display:inline-block”や”display:table”よりもその名の通り”flexible”にできます。

固定&リキッドの組あわせはどのように記述するかのメモ。

スポンサーリンク

HTML

リキッドの方に「flex:1;」を指定します。

CSS

解説

「flex」は「flex-grow」、「flex-shrink」、「flex-basis」の値をまとめて記述するためのプロパティです。

flex: ● ▲ ■; = flex-grow:●; flex-shrink:▲; flex-basis:■;

【初期値】flex: 0 1 auto;

「flex:1」とした場合、「flex-grow:1」と同じ意味になります。
フルで言うと「flex: 1 1 auto」です。

備考欄:CSS3の仕様では個別に指定するより、flexプロパティで記述することが推奨されています。
flex-grow:1;(これより…)

flex:1;(こう…)

flex-growの値が「1」の場合

flexコンテナにできた余白の部分をflexアイテムで仲良く分け合い、引き延ばされます。

flex-growの値が「0」の場合

分配率が「0」となり、flexアイテムは引き延ばされません。

“flex-grow”の初期値は「0」なので、本当は…

固定のflexアイテムにはflex-grow: 0;が、リキッドのflexアイテムにはflex-grow: 1;が指定されているのがポイントです。
試しに”.flex-item01″の方に「flex-grow: 1;」を指定すると、
固定ではなくなります。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする