Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

justify-content

概要

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

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

将来もこのプロパティは flex コンテナにしか適用されないと仮定せず、display プロパティに別の値を設定することで justify-content を隠蔽しないようにしてください。CSSWG はこのプロパティの用途をあらゆるブロック要素に拡張しています。仕様草案はごく初期の段階であり、まだ実装されていません。

初期値flex-start
適用対象flex containers
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については 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;
}

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

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module
justify-content の定義
勧告候補 最初の定義

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 18.0 (18.0) (要設定) [1]
20.0 (20.0)
21-webkit
29
11 12.10 9
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート ? ? 未サポート 12.10 未サポート

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

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: myakura, yyss, fscholz, teoli, ethertank
 最終更新者: myakura,