align-content

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

単一ラインの flexible box に対して、このプロパティは効果がありません。

構文

/* Basic positional alignment */
/* align-content は left および right の値をとりません */
align-content: center;     /* Pack items around the center */
align-content: start;      /* Pack items from the start */
align-content: end;        /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end;   /* Pack flex items from the end */

/* Normal alignment */
align-content: normal;

/* Baseline alignment */ 
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between; /* Distribute items evenly
                                 The first item is flush with the start,
                                 the last is flush with the end */
align-content: space-around;  /* Distribute items evenly
                                 Items have a half-size space
                                 on either end */
align-content: space-evenly;  /* Distribute items evenly
                                 Items have equal space around them */
align-content: stretch;       /* Distribute items evenly
                                 Stretch 'auto'-sized items to fit
                                 the container */

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

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

値

start

アイテムは cross axis の配置コンテナーの始端に向かって、互いに接するように詰められます。

end

アイテムは cross axis の配置コンテナーの終端に向かって、互いに接するように詰められます。

flex-start

アイテムは flex コンテナーの cross-start 側で、互いに接するように配置コンテナーの端に詰められます。
これは flex レイアウトのアイテムのみに適用します。flex コンテナーの子ではないアイテムでは、この値は start であるように扱います。

flex-end

アイテムは flex コンテナーの cross-end 側で、互いに接するように配置コンテナーの端に詰められます。
これは flex レイアウトのアイテムのみに適用します。flex コンテナーの子ではないアイテムでは、この値は end であるように扱います。

center

アイテムは cross axis に沿って配置コンテナーの中央で、互いに接するように詰められます。

normal

align-content の値が設定されていないかのように、アイテムを既定の位置に詰めて配置します。

baseline
first baseline
last baseline

first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は start、last baseline の代替配置は end です。

space-between

アイテムは cross axis に沿って配置コンテナーで、均等に配置されます。隣接するアイテムの間のスペースは同じサイズです。最初のアイテムは main-start の端に、最後のアイテムは main-end の端に寄せられます。

space-around

アイテムは cross axis に沿って配置コンテナーで、均等に配置されます。隣接するアイテムの間のスペースは同じサイズです。最初のアイテムの前および最後のアイテムの後ろに置かれる余白のサイズは、隣接するアイテム間の余白の半分に等しくなります。

space-evenly

アイテムは cross axis に沿って配置コンテナーで、均等に配置されます。隣接するアイテムの間のスペース、main-start の端と最初のアイテムの間のスペース、main-end の端と最後のアイテムの間のスペースはすべて同じサイズです。

stretch

cross axis に沿うアイテムの合計サイズが配置コンテナーのサイズより小さい場合に、サイズが auto であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、max-height/max-width (あるいは同等の機能) による制限は尊重します。これにより、合計サイズは cross axis に沿って配置コンテナーを完全に埋めるようになります。

safe

アイテムのサイズが配置コンテナーを超えるとき、アイテムは配置モードが start であったかのように配置されます。

unsafe

アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。

形式構文

normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>
where 
<baseline-position> = [ first | last ]? baseline
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

例

CSS

#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 > 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;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

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

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

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;
});

表示結果

仕様書

ブラウザー実装状況

関連情報

• CSS Flexbox Guide: Basic Concepts of Flexbox
• CSS Flexbox Guide: Aligning items in a flex container
• CSS Grid Guide: Box alignment in CSS Grid layouts
• CSS Box Alignment