【CSS3】Flexboxの使い方②

【CSS3】レスポンシブWebデザインに欠かせないFlexboxの使い方②

2016年3月20日2016年4月6日

Contents

今回はFlexboxの使い方について、詳しくみていきたいと思います。
まず、flexboxを利用する上で、最初に覚えておきたい用語がいくつかあります。

子要素を内包するコンテナ、親要素です。
displayの値にflexまたはinline-flexを指定することでflexboxレイアウトを利用することができます。

特に、この二つの軸の方向を頭に入れておくと、理解が進みやすくなります。

flexコンテナのdisplayプロパティにflexを指定します。
また、safari用にベンダープレフィックスを付加しておいたほうがいいでしょう。

flex itemはデフォルトで左から右へ、横並びに配置されます。
方向を変える場合は、flex-directionに値を指定します。

例）

container{
display:flex;
flex-direction: row-reverse;
}

justify-contentプロパティを指定すると、中央寄せ、左寄せ、右寄せを指定することができます。
デフォルトでは、主軸の始点である左側にアイテムが寄せられます。

例）等間隔に配置

.container{
  justify-content: space-around ;
  }

align-itemsプロパティで、縦位置を指定することができます。
デフォルトでは、アイテムの高さを全て含めます。

例）中央に配置

.container{
  align-items: center ; 
  }

flex itemを１行にまとめて配置するか、複数行に配置するかをflex-wrapで指定することができます。
デフォルトでは１行に配置されます。

例）複数行に、下から上方向に配置

.container{
flex-wrap: wrap-reverse;
}

orderプロパティに整数で順番を指定することができます。
下のサンプルは、②のorder値を３に、③のorder値を２にしたもの。
デフォルトは0です。

.item{
order:整数値;
}

flex-growは、flexコンテナにスペースがある場合に、アイテムの伸びる倍率を整数値で指定できます。下のサンプルは①のflex-grow値を３に、②のflex-grow値を７に指定したものです。

.item{
flex-grow:整数値;
}

flexboxをクリック操作で体験できます。
チェックを入れるとアイテムが動くので、どのプロパティがどのように影響するのかを知ることができます。
ぜひ、試してみてください。

以上、Flexboxで指定できる主なプロパティの使い方について、いくつかご紹介しました。ここでご紹介した以外にも細かい指定ができます。
これからのレスポンシブWebに必須のFlexbox。ぜひ、今のうちに使い方をチェックしてみてください。