justify-content

概要

CSS justify-content プロパティは、コンテナの main-axis に沿ってスペースを flex アイテムの間や周囲へどのように分配するかを定義します。

長さや自動マージンが適用された後に配置が行われることから、flex-grow が 0 ではない flexible 要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

/* flex アイテムを始端から詰める */
justify-content: flex-start;

/* flex アイテムを終端から詰める */
justify-content: flex-end;

/* flex アイテムを中央に配置する */ 
justify-content: center;

/* flex アイテムを均等に配置する。
最初のアイテムは始端に、最後のアイテムは終端に配置する */
justify-content: space-between;

/* flex アイテムを均等に配置する。
各アイテムの周囲に均等なスペースを置く */
justify-content: space-around;

/* グローバル値 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

値

flex-start

flex アイテムは main-start を起点に詰められます。最初の flex アイテムのマージンはラインの main-start の端に寄せられ、後続の flex アイテムは直前のアイテムに寄せられます。

flex-end

flex アイテムは main-end を起点に詰められます。最後の flex アイテムのマージンの端はラインの main-end の端に寄せられ、先行する flex アイテムは直後のアイテムに寄せられます。

center

flex アイテムはラインの中央に向かって詰められます。flex アイテムは互いに寄せられ、ラインの中央に配置されます。ラインの main-start から最初のアイテムまでの余白と、ラインの main-end から最後のアイテムまでの余白は同じです。

space-between

flex アイテムはラインに沿って均等に配置されます。隣接するアイテム間の余白が同じになるように、余白が置かれます。main-start および main-end の端に、それぞれ最初の flex アイテムおよび最後の flex アイテムが寄せられます。

space-around

隣接する flex アイテム間の余白が同じになるように、アイテムが均等に配置されます。最初のアイテムの前および最後のアイテムの後ろに置かれる余白のサイズは、隣接するアイテム間の余白の半分に等しくなります。

形式構文

flex-start | flex-end | center | space-between | space-around

例

HTML コンテンツ

<div id="container">
  <p>justify-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <p>justify-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

#container > div {
  display: flex;
  font-family: "Courier New", "Lucida Console", monospace;
}

#container > div > div {
  width: 50px;
  height: 50px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  justify-content: flex-start;
}

#center {
  justify-content: center;
}

#flex-end {
  justify-content: flex-end;
}

#space-between {
  justify-content: space-between;
}

#space-around {
  justify-content: space-around;
}

結果は以下のとおりです:

仕様書

ブラウザ実装状況

[1] バージョン 28 まで、Firefox は単一ラインの flexbox のみサポートしていました。Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定 "layout.css.flexbox.enabled" を true に変更します。

関連情報

• CSS flexible box の利用