Flexboxの使い方!

  • ブックマーク
  • -
    コピー

 CSSレイアウトにはさまざまな方法がありますが、その中でも比較的新しく、使いこなせると便利で、迅速にサイト設計ができるものの一つがFlexboxです。Flexboxはdisplayプロパティの一つであり、block要素、inline要素をそれぞれよしなに配置できるように使いやすく開発されております。

FlexboxZombieという有料ゲームは、flexboxを作成してゾンビを倒しながら勉強できるゲームです。

Flexboxとは、

行または列にアイテムをレイアウトするための1次元レイアウト方法。アイテムは、追加のスペースを埋めるために曲がり、より小さなスペースに収まるように縮小する。

ということで、今回はFlexboxをマスターしていきましょう!

display:flex

 まずdisplayのプロパティを、display:flex とすることで、flexboxを使用する準備が整います。
 これにより、親要素はフレックスコンテナになり、その子要素はフレックスアイテムになります。

親要素にdisplay: flexを設定してください!

flex-direction

 flex-directionは、アイテムが配置される主軸を定義します。
 指定されていない場合、デフォルトはflex-direction: rowです。 他にも、row-reversecolumn、およびcolumn-reverse などのオプションがあります。

justify-content

 justify-contentは、アイテムが主軸(またはフレックス方向)内でどのように配置されるかを制御します。
 指定されていない場合、デフォルトはjustify-content: flex-startです。 他のオプションは、centerflex-endspace-betweenspace-aroundなどがあります。

align-items

 align-itemsは、アイテムが交差軸、または主軸に垂直な軸でどのように配置されるかを制御します。
 指定されていない場合、デフォルトはalign-items: stretchです。 これにより、合わせ軸の余白全体が埋められます。他には、centerflex-startflex-endなどがあります。

align-self

 これまでに説明した他のプロパティとは異なり、align-selfは(親要素ではなく)アイテム自体に指定されます。 上記のalign-itemsと同じオプションがあり、stretchcenterflex-startflex-end などが使えます。

flex-grow

 flex-growは、コンテナが主軸に沿って伸びる場合、使用可能なすべての余白を満たすためにアイテムがどのように伸び率を決定します。 flex-growはアイテム自体で指定されます。
 指定されていない場合、デフォルトはflex-grow: 0です。これは、親要素のサイズが大きくなってもアイテムが大きくならないことを意味します。親要素の余白が与えられると、成長係数を持つアイテムは、flex-growプロパティで指定された比率に従って余白を埋めるように伸びます。
 アイテムに0より大きい値のflex-growプロパティがある場合、アイテムは(主軸の)すべての余白を埋めるように拡張され、justify-contentプロパティが不要になります。

flex-shrink

 flex-shrinkは、親コンテナが縮小するときにアイテムが縮小する比率を決定します。flex-growに似ていますね。flex-shrinkはアイテム自体に指定されています。
 指定されていない場合、デフォルトはflex-shrink: 1です。 flex-shrink: 0のアイテムは、何があってもサイズを維持し、縮小しません

Flexboxはいろいろな使い方があり、画面に合わせてよしなに余白や配置の設定をしてくれるので、使いこなせると便利です。
また、Flexboxチートシートというものもあり、こちらなどを参考にしつつ、自分が作りたいレイアウトにサイト設計をするのも良いでしょう!

  • ブックマーク
  • -
    コピー