path: root/files/ja/web/css/align-content/index.html

---
title: align-content
slug: Web/CSS/align-content
tags:
  - CSS
  - CSS フレックスボックス
  - CSS プロパティ
  - CSS ボックス配置
  - Reference
  - place-content
translation_of: Web/CSS/align-content
---
<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>align-content</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>の交差軸または<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッド</a>のブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。</p>

<p>下記の対話型のデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。</p>

<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<p>単一行のフレックスコンテナー (つまり、 <code>flex-wrap: nowrap</code> のもの) では、このプロパティは効果がありません。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers">/* 基本的な位置による配 */
/* align-content は left および right の値を取りません */
align-content: center;     /* アイテムを中央に寄せる */
align-content: start;      /* アイテムを先頭に寄せる */
align-content: end;        /* アイテムを末尾に寄せる */
align-content: flex-start; /* フレックスアイテムを先頭に寄せる */
align-content: flex-end;   /* フレックスアイテムを末尾に寄せる */

/* 通常の配置 */
align-content: normal;

/* ベースラインの配置 */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 均等配置 */
align-content: space-between; /* アイテムを均等に配置し
                                 最初のアイテムは先頭に寄せ、
                                 最後のアイテムは末尾に寄せる */
align-content: space-around;  /* アイテムを均等に配置し
                                 各アイテムの両側に半分の大きさの
                                 間隔を置く */
align-content: space-evenly;  /* アイテムを均等に配置し
                                 各アイテムの周りに同じ大きさの間隔を置く */
align-content: stretch;       /* アイテムを均等に配置し
                                 コンテナーに合うようにサイズ「自動」の
                                 アイテムを引き伸ばす */

/* あふれた場合の配置 */
align-content: safe center;
align-content: unsafe center;

/* グローバル値 */
align-content: inherit;
align-content: initial;
align-content: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>start</code></dt>
 <dd>各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。</dd>
 <dt><code>end</code></dt>
 <dd>各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。</dd>
 <dt><code>flex-start</code></dt>
 <dd>各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。<br>
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は <code>start</code> のように扱われます。</dd>
 <dt><code>flex-end</code></dt>
 <dd>各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。<br>
 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は <code>end</code> のように扱われます。</dd>
 <dt><code>center</code></dt>
 <dd>各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。</dd>
 <dt><code>normal</code></dt>
 <dd>各アイテムは <code>align-content</code> の値が設定されていないかのように、既定の位置に寄せて配置されます。</dd>
 <dt><code>baseline<br>
 first baseline</code><br>
 <code>last baseline</code></dt>
 <dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd>
 <dd>first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br>
 <code>first baseline</code> の代替配置は <code>start</code>、<code>last baseline</code> の代替配置は <code>end</code> です。</dd>
 <dt><code>space-between</code></dt>
 <dd>各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは配置コンテナーの交差軸の先頭側に寄せられ、最後のアイテムは配置コンテナーの交差軸の末尾側に寄せられます。</dd>
 <dt><code>space-around</code></dt>
 <dd>各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。</dd>
 <dt><code>space-evenly</code></dt>
 <dd>各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔、先頭側の端と最初のアイテムの間のの余白、末尾側の端と最後のアイテムの間の余白は、まったく同じ幅になります。</dd>
 <dt><code>stretch</code></dt>
 <dd>各アイテムの交差軸方向の寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が <code>auto</code> のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、交差軸方向の寸法の合計が配置コンテナーを満たすようになります。</dd>
 <dt><code>safe</code></dt>
 <dd>配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが <code>start</code> であったかのように配置されます。</dd>
 <dt><code>unsafe</code></dt>
 <dd>配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight[4]">#container {
  height:200px;
  width: 240px;
  align-content: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div &gt; div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="container" class="flex"&gt;
  &lt;div id="item1"&gt;1&lt;/div&gt;
  &lt;div id="item2"&gt;2&lt;/div&gt;
  &lt;div id="item3"&gt;3&lt;/div&gt;
  &lt;div id="item4"&gt;4&lt;/div&gt;
  &lt;div id="item5"&gt;5&lt;/div&gt;
  &lt;div id="item6"&gt;6&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;label for="display"&gt;display: &lt;/label&gt;
  &lt;select id="display"&gt;
    &lt;option value="flex"&gt;flex&lt;/option&gt;
    &lt;option value="grid"&gt;grid&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;label for="values"&gt;align-content: &lt;/label&gt;
  &lt;select id="values"&gt;
    &lt;option value="normal"&gt;normal&lt;/option&gt;
    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
    &lt;option value="center" selected&gt;center&lt;/option&gt;
    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;

    &lt;option value="start"&gt;start&lt;/option&gt;
    &lt;option value="end"&gt;end&lt;/option&gt;
    &lt;option value="left"&gt;left&lt;/option&gt;
    &lt;option value="right"&gt;right&lt;/option&gt;

    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;

    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</pre>

<div class="hidden">
<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');

values.addEventListener('change', function (evt) {
  container.style.alignContent = evt.target.value;
});

display.addEventListener('change', function (evt) {
  container.className = evt.target.value;
});
</pre>
</div>

<h3 id="Result" name="Result">結果</h3>

<p>{{EmbedLiveSample("Example", 260, 290)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
   <td>{{Spec2("CSS3 Box Alignment")}}</td>
   <td>[ first | last ]? baseline, start, end, left, right, unsafe | safe の値を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}</td>
   <td>{{Spec2("CSS3 Flexbox")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<div>{{cssinfo}}</div>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>

<p>{{Compat("css.properties.align-content.flex_context")}}</p>

<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>

<p>{{Compat("css.properties.align-content.grid_context")}}</p>
</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
 <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内でのアイテムの配置</a></em></li>
 <li>CSS グリッドガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウト内でのボックス配置</a></em></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS ボックス配置</a></li>
</ul>

<div>{{CSSRef}}</div>