css3 Flexboxの使い方

Flexboxの使い方まとめです

レスポンシブのコーディングをする際に参考になるように記事書きます!!

基本の使い方

クラスに、【display: flex;】を追加します。

サンプル

BOX01
BOX02
BOX03

flex-directionの設定方法

基本的な使い方の、【display: flex;】の指定に対して、並び方の指定を
【flex-direction:任意の指定;】で指定します。

  • row(初期設定横並びになります)
  • row-reverse(右から)
  • column(縦並び)
  • column-reverse(下から縦並び)

期設定横並びになります【row】

BOX01
BOX02
BOX03

右から横並びになります【row-reverse】

BOX01
BOX02
BOX03

縦並びになります【column】

BOX01
BOX02
BOX03

縦並びになります【column】

BOX01
BOX02
BOX03

flex-wrapの設定方法

1行に複数のアイテムを並べる事が基本のコンセプトでしたが、そこから新しく追加された機能がこちらです。
複数のアイテムを一行や複数行に配置する設定がコントロールできます。

  • nowrap(一行に配置)
  • wrap(横複数行に配置)
    ※一行に収まらない場合複数行に折り返します。
  • wrap-reverse(下から上へ、の順番に配置)

一行に配置【nowrap】

BOX01
BOX02
BOX03

一行に収まらない場合複数行になります【wrap】

BOX01
BOX02
BOX03

下から上へ、の順番に配置になります【wrap-reverse】

BOX01
BOX02
BOX03

justify-contentの設定方法

1行に並べられたアイテムの並び方の設定を指定できます。

  • flex-start(左側から並べる)
  • flex-end(右側から並べる)
  • center(中央に配置)
  • space-between(最初と最後のアイテムは端に、残りは等間隔で配置)
  • space-around(全てのアイテムは等間隔に配置)

左側から並べる【flex-start】

BOX01
BOX02
BOX03

右側から並べる【flex-end】

BOX01
BOX02
BOX03

中央に配置【center】

BOX01
BOX02
BOX03

最初と最後のアイテムは端に、残りは等間隔で配置【space-between】

BOX01
BOX02
BOX03

最初と最後のアイテムは端に、残りは等間隔で配置【space-around】

BOX01
BOX02
BOX03

align-contentの設定方法

垂直方向に揃えて配置の設定を指定できます。

  • stretch(均等に分配されたスペースができます)
  • flex-start(スペースを詰めて配置します)
  • flex-end(下揃えに配置)
  • center(中心に配置)
  • space-between(上と下に合わせて等間隔で配置)
  • space-around(全体を等間隔で配置)

均等に分配されたスペースができます【stretch】

BOX01
BOX02
BOX03
BOX04
BOX05
BOX06
BOX07
BOX08
BOX09
BOX10
BOX11
BOX12
BOX13
BOX14
BOX15
BOX16
BOX17
BOX18

スペースを詰めて配置します【flex-start】

BOX01
BOX02
BOX03
BOX04
BOX05
BOX06
BOX07
BOX08
BOX09
BOX10
BOX11
BOX12
BOX13
BOX14
BOX15
BOX16
BOX17
BOX18

下揃えに配置【flex-end】

BOX01
BOX02
BOX03
BOX04
BOX05
BOX06
BOX07
BOX08
BOX09
BOX10
BOX11
BOX12
BOX13
BOX14
BOX15
BOX16
BOX17
BOX18

中心に配置【center】

BOX01
BOX02
BOX03
BOX04
BOX05
BOX06
BOX07
BOX08
BOX09
BOX10
BOX11
BOX12
BOX13
BOX14
BOX15
BOX16
BOX17
BOX18

上と下に合わせて等間隔で配置【space-between】

BOX01
BOX02
BOX03
BOX04
BOX05
BOX06
BOX07
BOX08
BOX09
BOX10
BOX11
BOX12
BOX13
BOX14
BOX15
BOX16
BOX17
BOX18

全体を等間隔で配置【space-around】

BOX01
BOX02
BOX03
BOX04
BOX05
BOX06
BOX07
BOX08
BOX09
BOX10
BOX11
BOX12
BOX13
BOX14
BOX15
BOX16
BOX17
BOX18

Commentsこの記事についたコメント

%d人のブロガーが「いいね」をつけました。