メニュー

【保存版】CSS Flexboxの種類・使い方

こんにちは。Webデザイナーの山本です。
今更ですがCSS flexboxの種類や詳細、使い方の例などを保存版としてまとめたのでご紹介します。

CSS Flexboxとは?

CSS Flexbox(フレックスボックス)とは、Flexible Box Moduleの略でCSSで簡単にレイアウトを組むことが出来る手法のことです。
上図のようにflexコンテナ(親要素)とflexアイテム(子要素)と呼ばれる構成で出来ています。

今までレイアウトを組む際に、inline-blockやfloatを使ったりしていましたがflexboxを使うともっと簡単に組むことができちゃいます。

サポート状況

以前はサポートもあまり多くなかったので使用場面が限られていたのですが、現在はほぼ全てのブラウザに対応しています。
CSS Flexible Box Layout Module サポート状況

各説明

では早速説明していきましょう。
まずは早見表をどうぞ。
※画像をクリックすると詳しい説明に飛びます。

親要素のプロパティ一覧

子要素のプロパティ一覧

並ぶ向き:flex-direction




flex-directionは、子要素をどの方向に配置するかを指定するプロパティです。

使い方

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

値の種類

・row(初期値) : 子要素を左から右へと配置
・row-reverse : 子要素を右から左へと配置
・column : 子要素を上から下へと配置
・colmn-reverse : 子要素を下から上へと配置

折り返し方:flex-wrap



flex-wrapは、子要素の折り返し方を指定するプロパティです。

使い方

.container{
     display: flex;
     flex-wrap: nowrap;
}

値の種類

・nowrap(初期値) : 折り返さず一行に並べる
・wrap : 上から下に折り返す
・wrap-reverse : 下から上に折り返す

並ぶ向きと折り返し方をまとめて指定:flex-flow

flex-flowは、flex-directionとflex-wrapを一括で指定できるプロパティです。

使い方

.container{
     display: flex;
     flex-flow: row nowrap; 
}

水平方向の配置:justify-content





justify-contentは、子要素の水平方向の位置を指定するプロパティです。

使い方

.container{
     display: flex;
     justify-content: flex-start;
}

値の種類

・flex-start(初期値) : 左揃え
・flex-end : 右揃え
・center : 中央揃え
・space-between : 両端揃え(両端の余白なし)
・space-around : 両端揃え(両端の余白あり)

垂直方向の配置:align-items





align-itemsは、子要素の垂直方向の位置を指定するプロパティです。

使い方

.container{
     display: flex;
     align-items: stretch;
}

値の種類

・stretch(初期値) : 親要素の高さいっぱいに広がる
・flex-start : 上揃え
・flex-end : 下揃え
・center : 中央揃え
・baseline : アイテムのベースラインに揃える

複数行の垂直方向の配置:align-content






align-contentは、子要素が複数行になった時の垂直方向の位置を指定するプロパティです。
「flex-wrap: nowrap;」が指定されている場合、align-contentは無効になります。

使い方

.container{
     display: flex;
     align-content: stretch;
}

値の種類

・stretch(初期値) : 親要素の高さいっぱいに広がる
・flex-start : 上揃え
・flex-end : 下揃え
・center : 中央揃え
・space-between : 上下揃え(上下の余白なし)
・space-around : 上下揃え(上下の余白あり)

順序の指定:order

orderは、子要素の並び順を任意で指定できるプロパティです。
記述順に係わらず順序を変更することができます。

使い方

.container{
     display: flex;
}
.item{
     order: 1;
}

値の種類

・0(初期値) : マイナス値から指定が可能

子要素の伸びる比率:flex-grow

flex-growは、親要素に余ったスペースがある場合、子要素の伸び率を指定できるプロパティです。

使い方

.container{
     display: flex;
}
.item{
     flex-grow: 2;
}

値の種類

・0(初期値) : 数値のみ指定可能。(マイナス値は不可)

子要素の縮む比率:flex-shrink

flex-shrinkは、親要素に余ったスペースにがなく子要素が入りきらない場合、子要素の縮み率を指定できるプロパティです。

使い方

.container{
     display: flex;
}
.item{
     flex-shrink: 2;
}

値の種類

・1(初期値) : 数値のみ指定可能。(マイナス値は不可)

子要素のベースとなる幅の指定:flex-basis

flex-basisは、子要素の幅を指定できるプロパティです。
widthと同じように指定できます。

使い方

.container{
     display: flex;
}
.item{
     flex-basis: 100px;
}

値の種類

・auto(初期値) : pxや%で指定することが可能

flex-grow、flex-shrink、flex-basisをまとめて指定:flex

flexは、flex-grow、flex-shrink、flex-basisをまとめて指定できるプロパティです。

使い方

.container{
     display: flex;
}
.item{
     flex: 0 1 auto;
}

値の種類

・0 1 auto(初期値)

子要素の垂直方向の揃え:align-self






align-selfは、子要素の垂直方向の揃えを指定できるプロパティです。
親要素に余白がある場合のみ使用できます。
align-itemsと同じ機能ですが、align-selfのほうが優先されます。

使い方

.container{
     display: flex;
}
.item{
     align-self: auto;
}

値の種類

・auto(初期値) : 親要素のalign-itemsの値を継承(親要素を持たない場合はstretch となる)
・flex-start : 上揃え
・flex-end : 下揃え
・center : 中央揃え
・baseline : ベースラインに揃える
・stretch : 親要素の高さいっぱいに広げて配置

以上になります。

毎回ですが、まとめてる側もいろいろ勉強になりますね。
閲覧ありがとうございました。

この記事をシェアする

  • twitter
  • facebook
  • Google+
  • B!はてブ
  • pocket
トップへ戻る

CONTACT

ゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。

ゲーム開発に関する
お問い合わせはこちら

Webサイト制作に関する
お問い合わせはこちら