flexboxを使ったレイアウト方法まとめ

  • 2016.12.29
  • CSS

display:flex;を使ったレイアウト方法をまとめました。
上下左右のレイアウトに柔軟に対応できるので、レスポンシブやグリットレイアウトに役立ちます。

flexboxで上下左右中央寄せ

See the Pen flexboxで上下中央寄せ by ponzu (@ponzu) on CodePen.

align-items: center; 上下中央寄せ
justify-content: center;

左右中央寄せ
.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

flexboxで両端揃え・均等揃え(縦)

See the Pen flexboxで両端揃え・均等揃え(縦) by ponzu (@ponzu) on CodePen.

両端揃え(縦並び)

flex-flow:column; 縦方向に配置
justify-content:space-between; 両端に合わせて均等間隔に配置
.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
   flex-flow: column;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
}

均等揃え(縦並び)

flex-flow: column; 縦方向に配置
justify-content:space-around; 両端に余白を入れて均等間隔に配置
.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
   flex-flow: column;
  -ms-flex-pack:distribute;
  justify-content:space-around;
}

flexboxで両端揃え・均等揃え(横)

See the Pen flexboxで両端揃え・均等揃え(横) by ponzu (@ponzu) on CodePen.

両端揃え(横並び)

justify-content:space-between; 両端に合わせて均等間隔に配置
.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
}

均等揃え(横並び)

justify-content:space-around; 両端に余白を入れて均等間隔に配置
.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:distribute;
  justify-content:space-around;
}

flexboxで右寄せ

See the Pen flexboxで右寄せ by ponzu (@ponzu) on CodePen.

justify-content:flex-end; 横並びの場合は右寄せで配置
.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

flexboxで下寄せ

See the Pen flexboxで下寄せ by ponzu (@ponzu) on CodePen.

flex-flow: column; 縦方向に配置
justify-content:flex-end; 縦並びの場合は下寄せで配置
.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
  -ms-flex-flow: column;
      flex-flow: column;
}