CSS floatを使わないレイアウト「Flexbox」について4~主軸に沿ってどのように並べるかの設定~

前回の記事で、主軸の向きを設定するflex-direction、アイテムの折り返しをするかどうかのflex-wrap、その二つをまとめて書くショートハンドプロパティflex-flowを紹介しました。今回は、以下のFlexbox関連プロパティを紹介します。

  • justify-content:主軸に沿ってどのように並べるか

justify-content:主軸に沿ってどのように並べるか

主軸に沿ってどのようにFlexアイテムを並べるか指定することができます。右寄せ、左寄せ、中央配置、均等配置などの設定ができます。

指定する場所:flexコンテナー

justify-contentの値
意味 左から右へ並べた時の見た目
flex-start 最初のFlexアイテム側に詰める(初期値) 左寄せ
flex-end 最後のFlexアイテム側に詰める 右寄せ
center 中央に配置 左右中央配置
space-between Flexアイテムを均等配置する
(最初のアイテムを始点に、最後のアイテムを終端に配置)
均等配置(両端にスペースなし)
space-around Flexアイテムを均等配置する
(アイテムの周囲に均等にスペースをとる)
均等配置(両端にスペースあり)

justify-contentのイメージ

記述例

HTML

<div class="container">
  <div>BOX01</div>
  <div>BOX02</div>
  <div>BOX03</div>
</div>

CSS

.container { justify-content: center; }

参考サイト

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>