[CSS] CSS3のFlexboxを使った簡単レイアウトまとめ

Flexboxを使えば、何かと設定が面倒なfloatを使わなくとも、簡単にフレキシブルなレイアウトが組めちゃいます♪PCとスマホ両方に対応することが必須となっている今だからこそ、Flexboxの使い方をマスターして、楽に柔軟なレイアウトのサイトを構築しましょう!

flexに対応しているブラウザ

要点解説
  • Flexboxを使うと、フレキシブルなレイアウトが簡単に組める
  • 記述するコード量は少なくて楽チン♪
  • 要素をきれいに並べたり、揃えたりするのが簡単にできる
  • モダンブラウザにも対応し、仕様も安定したので、実務で使っても問題ない(と思う)

flexに対応しているブラウザ

flexに対応しているブラウザ(http://caniuse.com/より)

モダンブラウザではflexを問題なく利用することができます。

Can I use.comへのリンクはこちら

Flexboxのステキなところ♪

さまざまなプロパティーを組み合わせたり、JavaScriptに頼ることなく、よくあるレイアウトを簡単に実装できます。

とっても便利なFlexboxの活用法

Flexboxの用語解説

Flex container (flexコンテナ)

displayプロパティにflexまたはinline-flexを指定することによって定義される親要素です。inline-flexはインライン要素に使います。

.flex-container{
  dispaly: -webkit-flex; /* Safari用 */
  display: flex;
}

こうするだけで、小要素は横に並んでくれます。

See the Pen flexbox1 by journalismhacks (@journalismhacks) on CodePen.

Flex item (flexアイテム)

flexコンテナの子要素のことです。

Flex direction (flex アイテム)

flexコンテナの主軸の方向を設定できます。要するに、flexコンテナ(親要素)の中のflexアイテム(子要素)を配置する順番を指定することができます。

flexアイテムを並べてみる

親要素のdisplayプロパティに、flex / inline-flexと以下のものを定義してください。

左から右へflexアイテムを並べる場合

.flex-container{
  -webkit-flex-direction: row; /* Safari用 */
  flex-direction:         row;
}

右から左へflexアイテムを並べる

補足
一つだけ左寄せする場合は、:first-childセレクターにmargin-right:auto;を指定します。

.flex-container{
  -webkit-flex-direction: row-reverse; /* Safari用 */
  flex-direction:         row-reverse;
}

See the Pen flexbox 1 by journalismhacks (@journalismhacks) on CodePen.

ちゃんと右から左に並びました。

上から下へflexアイテムを並べる

.flex-container {
  -webkit-flex-direction: column; /* Safari用 */
  flex-direction:         column;
}

下から上へflexアイテムを並べる

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari用 */
  flex-direction:         column-reverse;
}

組み合わせてつかう

親要素・子要素・孫要素で入れ子にすることもできます

See the Pen flexbox3 by journalismhacks (@journalismhacks) on CodePen.

コメントを残す