mozilla

Revision 398061 of justify-content

  • リビジョンの URL スラグ: Web/CSS/justify-content
  • リビジョンのタイトル: justify-content
  • リビジョンの ID: 398061
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン はい
  • コメント 英語版 Dec 13, 2012 12:17:34 AM をもとに新規翻訳。CSS/justify-content Web/CSS/justify-content

このリビジョンの内容

{{ CSSRef() }}

概要

CSS justify-content プロパティは、ブラウザが flex アイテムをカレントラインの main-axis 上で配置する際に、利用可能なスペースを要素の間や周囲へどのように分配するかを定義します。長さや自動マージンが適用された後に配置が行われることから、{{cssxref("flex-grow")}} が 0 ではない flexible 要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

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

  • {{ Xref_cssinitial() }} {{cssinitial("justify-content")}}
  • 適用対象 flex コンテナ
  • {{ Xref_cssinherited() }} なし
  • メディア {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} 指定値

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

構文

形式構文: {{csssyntax("justify-content")}}
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around

justify-content: inherit

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

 

仕様書

仕様書 状況 備考
{{ SpecName('CSS3 Flexbox', '#justify-content', 'justify-content') }} {{ Spec2('CSS3 Flexbox') }}  

ブラウザ実装状況

{{ CompatibilityTable() }}

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート {{ CompatGeckoDesktop("18.0") }} (要設定) [1]
{{ CompatGeckoDesktop("20.0") }}
21.0{{ property_prefix("-webkit") }} {{ CompatNo() }} 12.10 {{ CompatNo() }}
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }} 12.10 {{ CompatNo() }}

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

関連情報

このリビジョンのソースコード

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">概要</h2>
<p><a href="/ja/docs/CSS" title="CSS">CSS</a> <code>justify-content</code> プロパティは、ブラウザが flex アイテムをカレントラインの main-axis 上で配置する際に、利用可能なスペースを要素の間や周囲へどのように分配するかを定義します。長さや自動マージンが適用された後に配置が行われることから、{{cssxref("flex-grow")}} が <code>0</code> ではない flexible 要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。</p>
<div class="note">
  <p>将来もこのプロパティは flex コンテナにしか適用されないと仮定せず、{{cssxref("display")}} プロパティに別の値を設定することで <code>justify-content</code> を隠蔽しないようにしてください。CSSWG は<a href="http://dev.w3.org/csswg/css3-align/#justify-content" title="/en-US/docs/http://dev.w3.org/csswg/css3-align/#justify-content">このプロパティの用途をあらゆるブロック要素に拡張しています</a>。仕様草案はごく初期の段階であり、まだ実装されていません。</p>
</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn><code> </code>{{cssinitial("justify-content")}}</li>
  <li><dfn>適用対象</dfn> flex コンテナ</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> なし</li>
  <li><dfn>メディア</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> 指定値</li>
</ul>
<p>他のプロパティや詳細情報については <a href="/ja/docs/CSS/Using_CSS_flexible_boxes" title="/ja/docs/CSS/Using_CSS_flexible_boxes">CSS flexible box の利用</a> をご覧ください。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="twopartsyntaxbox">
<a href="/ja/docs/CSS/Value_definition_syntax" title="/ja/docs/CSS/Value_definition_syntax">形式構文</a>: {{csssyntax("justify-content")}}
</pre>
<pre>
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around

justify-content: inherit
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
  <dt>
    <code>flex-start</code></dt>
  <dd>
    flex アイテムは <strong>main-start</strong> を起点に詰められます。最初の flex アイテムのマージンはラインの main-start の端に寄せられ、後続の flex アイテムは直前のアイテムに寄せられます。</dd>
  <dt>
    <code>flex-end</code></dt>
  <dd>
    flex アイテムは <strong>main-end</strong> を起点に詰められます。最後の flex アイテムのマージンの端はラインの main-end の端に寄せられ、先行する flex アイテムは直後のアイテムに寄せられます。</dd>
  <dt>
    <code>center</code></dt>
  <dd>
    flex アイテムはラインの中央に向かって詰められます。flex アイテムは互いに寄せられ、ラインの中央に配置されます。ラインの main-start から最初のアイテムまでの余白と、ラインの main-end から最後のアイテムまでの余白は同じです。</dd>
  <dt>
    <code>space-between</code></dt>
  <dd>
    flex アイテムはラインに沿って均等に配置されます。隣接するアイテム間の余白が同じになるように、余白が置かれます。main-start および main-end の端に、それぞれ最初の flex アイテムおよび最後の flex アイテムが寄せられます。</dd>
  <dt>
    <code>space-around</code></dt>
  <dd>
    隣接する flex アイテム間の余白が同じになるように、アイテムが均等に配置されます。最初のアイテムの前および最後のアイテムの後ろに置かれる余白のサイズは、隣接するアイテム間の余白の半分に等しくなります。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<pre>
&nbsp;</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th>仕様書</th>
      <th>状況</th>
      <th>備考</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Flexbox', '#justify-content', 'justify-content') }}</td>
      <td>{{ Spec2('CSS3 Flexbox') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{ CompatGeckoDesktop("18.0") }} (要設定) [1]<br />
          {{ CompatGeckoDesktop("20.0") }}</td>
        <td>21.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>12.10</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>12.10</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Firefox は単一ラインの flexbox のみサポートしています。flexbox サポートを有効にするには、Firefox 18 および 19 ではユーザが about:config の設定 "layout.css.flexbox.enabled" を <code>true</code> に変更することが必要です。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li><a href="/ja/docs/CSS/Using_CSS_flexible_boxes" title="/ja/docs/CSS/Using_CSS_flexible_boxes">CSS flexible box の利用</a></li>
  <li>{{ CSS_Reference:FlexBox() }}</li>
</ul>
このリビジョンへ戻す