KOYO DIGITAL WORKSパーツギャラリー

Flexbox

  • Chrome
  • Firefox
  • IE11

CSS3のFlexboxをいろいろと試してみます。

Flexbox使用前

See the Pen flexbox_basic01 by yukako (@KDWyukako) on CodePen.

親要素「class="contents"」の中に、子要素(緑色のボックス)「class="item"」が入っている。

親要素に関するプロパティ

横並び

See the Pen flexbox_basic02 by yukako (@KDWyukako) on CodePen.

親要素に「display: flex;」を指定。

justify-content:水平方向の揃え方

See the Pen flexbox_basic03 by yukako (@KDWyukako) on CodePen.

親要素の幅に合わせて、子要素の並べ方を指定。
サンプルでは、「space-around」を指定。左右の端も含めて均等間隔に配置する。
他にも「flex-start」「flex-end」「center」「space-between」がある。

flex-direction:子要素の配置方向

See the Pen flexbox_basic04 by yukako (@KDWyukako) on CodePen.

サンプルでは、右から並ぶように「flex-direction:row-reverse;」を指定。
他にも、上から下に並べる「column」、下から上に並べる「column-reverse」等がある。

align-items:垂直方向の揃え方

See the Pen flexbox_basic05 by yukako (@KDWyukako) on CodePen.

サンプルでは、上下中央に配置するよう「center」を指定。
他にも、「flex-start」「flex-end」「baseline」「stretch」がある。

flex-wrap:子要素の折り返し方

See the Pen flexbox_basic06 by yukako (@KDWyukako) on CodePen.

初期値は「nowrap」(折り返しなし)。サンプルでは、折り返して上から下へ配置するよう「wrap」を指定。
他にも、折り返して下から上へ配置する「wrap-reverse」がある。

align-content:複数行にした時の揃え方

See the Pen flexbox_basic07 by yukako (@KDWyukako) on CodePen.

サンプルでは、上揃えにするよう「flex-start」を指定。
複数行の時も垂直方向の揃え方を上下中央に配置したい場合は、「center」を指定。
他にも、「flex-end」「center」「space-between」「space-around」がある。

子要素に関するプロパティ

order:順番指定

See the Pen flexbox_basic08 by yukako (@KDWyukako) on CodePen.

子要素の表示順を変えることができる。

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

See the Pen flexbox_basic09 by yukako (@KDWyukako) on CodePen.

親要素のスペースに余りがある場合、「flex-grow」の値を設定すると、自動的に利用可能な領域いっぱいまで伸びる。(flex-growの逆)
サンプルでは、item2が2倍になるよう「flex-grow:2;」を指定。

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

See the Pen flexbox_basic10 by yukako (@KDWyukako) on CodePen.

親要素のスペースに余りがなく子要素が入りきらない場合、「flex-grow」の値を設定すると、自動的に対象の子要素が縮む。
サンプルでは、item2が1/2倍になるよう「flex-shrink:2;」を指定。

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

See the Pen flexbox_basic11 by yukako (@KDWyukako) on CodePen.

子要素のベースとなる長さ(あるいは「最小の長さ」)を設定。
「width」とほぼ同じ働き。
。「auto」と指定した場合、子要素のコンテンツサイズが設定される。

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

See the Pen flexbox_basic12 by yukako (@KDWyukako) on CodePen.

サンプルでは、上下中央に配置するよう「center」を指定。
他にも、「flex-start」「flex-end」「baseline」「stretch」がある。

参考:日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

応用:「前の記事」「次の記事」へのリンク

See the Pen Flexbox_Sample01 by yukako (@KDWyukako) on CodePen.

hoverで矢印アイコン追加

See the Pen Flexbox_Sample02 by yukako (@KDWyukako) on CodePen.

サムネイル追加

See the Pen Flexbox_Sample03 by yukako (@KDWyukako) on CodePen.

応用:マルチカラムレイアウト

3カラム(画面サイズが狭くなると1カラム)

See the Pen Flexbox_MultiColumn01 by yukako (@KDWyukako) on CodePen.

カラムを敷き詰めるMasonryレイアウト

See the Pen Flexbox_MultiColumn02 by yukako (@KDWyukako) on CodePen.

参考:Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装

おすすめコンテンツ

WEBデザイナー/フロントエンドエンジニア 正社員募集中 リッチな動きをWebサイトに パーツギャラリー デザインギャラリー 様々な角度からWebサイトをサポート!Webサイト制作
ページの先頭へ