Widely available YES。全ブラウザで長年サポートされており、安心して使用できる。

Flexbox layout

CSS の align-content プロパティは、フレックスボックスの交差軸に沿って、またはグリッドやブロックレベル要素のブロック軸に沿って、コンテンツアイテム間の空間および周囲の空間の分配を決定します。

このプロパティは、単一行のフレックスコンテナー（つまり、flex-wrap: nowrap を指定したもの）には効果を持ちません。

下記のインタラクティブな例では、グリッドレイアウトを使用してこのプロパティのいくつかの値を実演しています。

レイアウト整列

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`align-content`	29	12	28	9	29	9
`flex context` フレックスレイアウトでサポートされています	21	12	28	9	25	9
`flex context.baseline`	57	79	45	9	57	9
`flex context.first baseline` 「最初のベースライン」	59	79	52	11	59	11
`flex context.last baseline` 「最後のベースライン」			52	11		11
`flex context.safe unsafe` 「安全」と「危険」	115	115	63	17.6	115	17.6
`flex context.space-evenly`	60	79	52	11	60	11
`flex context.start end` 「開始」と「終了」	93	93	45	15.6	93	15.6
`flex context.stretch`	57	79	52	9	57	9
`normal`	29	12	28	9	29	9
その他
`css.properties.align-items` CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスではcross axis方向のアイテムの配置を制御します。グリッドレイアウトでは、grid areasにおけるアイテムのブロック軸方向の配置を制御します。	29	12	20	9	29	9
CSS プロパティ
`flex context` フレックスレイアウトでサポートされています	52	12	20	7	52	7
`flex context.baseline`	21	79	28	7	25	7
`flex context.first baseline` 「最初のベースライン」	59	79	52	11	59	11
`flex context.last baseline` 「最後のベースライン」	108	108	52	16.2	108	16.2
`flex context.safe unsafe` 「安全」と「危険」	115	115	63	17.6	115	17.6
`flex context.start end` 「開始」と「終了」	93	93	45	15.4	93	15.4
その他
`css.properties.align-self` align-self は CSS のプロパティで、グリッドやフレックスのアイテムの align-items の値を上書きします。グリッドでは、アイテムはGrid Areas内で配置されます。フレックスボックスでは、アイテムはcross axis上で配置されます。	29	12	20	9	29	9
CSS プロパティ
`auto`	21	79	28	7	25	7
`flex context` フレックスレイアウトでサポートされています	36	12	20	7	36	7
`flex context.baseline`	21	79	28	7	25	7
`flex context.first baseline` 「最初のベースライン」	59	79	52	11	59	11
`flex context.last baseline` 「最後のベースライン」	108	108	52	16.2	108	16.2
`flex context.safe unsafe` 「安全」と「危険」	115	115	63	17.6	115	17.6
`flex context.start end` 「開始」と「終了」	93	93	45	15.4	93	15.4
`flex context.stretch`	57	79	52	9	57	9
`normal`	21	79	28	7	25	7
`stretch`	21	79	28	7	25	7
`flex`	29	12	20	9	29	9
`inline-flex`	29	12	20	9	29	9
その他
`css.properties.flex` flex は CSS の一括指定プロパティで、flex itemをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。	29	12	22	9	29	9
`css.properties.flex-basis` flex-basis は CSS のプロパティで、flex itemの主要部分の初期の寸法を設定します。 box-sizing で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。	29	12	22	9	29	9
CSS プロパティ
`auto`	22	12	22	9	25	9
`content`	94	94	61	15.4	94	15.4
`fit-content`	94	94	94	16	94	16
`max-content`	94	94	66	16	94	16
`min-content`	94	94	66	16	94	16
その他
`css.properties.flex-direction` flex-direction は CSS のプロパティで、主軸の方向や向き（通常または逆方向）を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。	29	12	22	9	29	9
CSS プロパティ
`column`	21	12	22	7	25	7
`column-reverse`	21	12	81	7	25	7
`row`	21	12	22	7	25	7
`row-reverse`	21	12	81	7	25	7
その他
`css.properties.flex-flow` flex-flow は CSS の一括指定プロパティで、フレックスコンテナーの向きと折り返しの動作を同時に指定します。	29	12	28	9	29	9
`css.properties.flex-grow` flex-grow は CSS のプロパティで、フレックスコンテナー内の正の余白のうち、フレックスアイテムの主軸長に割り当てる量を指定するフレックス伸長係数を設定します。	29	12	20	9	29	9
CSS プロパティ
`less than zero animate` 非標準 <0 アニメーション化	49	79	32		49
その他
`css.properties.flex-shrink` flex-shrink は CSS のプロパティで、フレックスアイテムのフレックス縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーより大きい場合、フレックスアイテムはそれに合わせるため、 flex-shrink 値に従って収縮します。それぞれのフレックス行の負の余白は、その行の flex-shrink 値が 0 より大きいフレックスアイテム間で分配されます。	29	12	20	9	29	9
`css.properties.flex-wrap` flex-wrap は CSS のプロパティで、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。	29	12	28	9	29	9
CSS プロパティ
`nowrap`	21	12	28	7	25	7
`wrap`	21	12	28	7	25	7
`wrap-reverse`	21	12	28	7	25	7
`none`	21	12	22	7	25	7
その他
`css.properties.justify-content` CSS の justify-content プロパティは、フレックスコンテナーのmain axis、グリッドおよび段組みコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。	29	12	20	9	29	9
CSS プロパティ
`flex context` フレックスレイアウトでサポートされています	52	12	20	7	52	7
`flex context.left right` 「左」と「右」	93	93	52	9	93	9
`flex context.safe unsafe` 「安全」と「危険」	115	115	63	17.6	115	17.6
`flex context.space-evenly`	60	79	52	11	60	11
`flex context.start end` 「開始」と「終了」	93	93	45	15.4	93	15.4
`flex context.stretch`	57	79	52	9	57	9
`left`	21	79	20	7	25	7
`normal`	21	79	20	7	25	7
`right`	21	79	20	7	25	7
その他
`css.properties.justify-items` CSS の justify-items プロパティは、ボックスのすべてのアイテムに既定の justify-self を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。	52	12	20	9	52	9
CSS プロパティ
`center`	52	79	20	9	52	9
`flex context` フレックスレイアウトでサポートされています	52	12	20	9	52	9
`left`	52	79	20	9	52	9
`legacy`	52	79	20	9	52	9
`right`	52	79	20	9	52	9
その他
`css.properties.order` order は CSS のプロパティで、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。明示的に order 値が指定されていないアイテムには、既定値である 0 が代入されます。	29	12	20	9	29	9
`css.properties.place-content` place-content は CSS の一括指定プロパティで、ブロック方向とインライン方向の内容物の配置 (すなわち align-content および justify-content) を、グリッドやフレックスボックスなどのレイアウトシステムにおいて、一度に指定することができます。	59	79	45	9	59	9
CSS プロパティ
`flex context` フレックスレイアウトでサポートされています	59	79	45	9	59	9
その他
`css.properties.place-items` CSS の place-items は一括指定プロパティで、アイテムをブロック方向とインライン方向の両方に一度に配置します。これは align-items および justify-items プロパティの値を設定します。 2 つ目の値が設定されていない場合、1 つ目の値が使用されます。	59	79	45	11	59	11
CSS プロパティ
`flex context` フレックスレイアウトでサポートされています	59	79	45	11	59	11
その他
`css.properties.place-self` place-self は CSS の一括指定プロパティで、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわち align-self および justify-self プロパティ) を一度に指定することができます。このプロパティは、ブロックレベルのボックス、絶対位置指定のボックス、グリッドアイテムに適用されます。 2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。	59	79	45	11	59	11
CSS プロパティ
`flex context` フレックスレイアウトでサポートされています	59	79	45	11	59	11
`absolutely positioned flex children` 絶対配置のフレックス子	52	12	52	11	52	11

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.item {
  flex: 1 1 auto;
}

ライブデモ

center aligned. basic

Element center placementminpattern. with Justify-content and align-items.

プレビュー全画面表示

space-between navigation

horizontal to group splitplacement, actual in toolbar. shape.

プレビュー全画面表示

equalcolumn with flex-grow

cardwidth, emptyspe-s eachelement to equalsplitexample.

プレビュー全画面表示

実務での使いどころ

ナビゲーションバー

ロゴ・メニュー項目・アクションボタンを水平に配置し、余白を自動的に調整するレスポンシブなナビゲーション。
カードの横並びレイアウト

複数のカードを横並びにし、高さを揃えつつ余剰スペースを均等に分配する。

注意点

flex-wrap を指定しないとアイテムが一行に押し込まれ、はみ出す場合がある。
order プロパティで視覚的な順序を変えると、キーボード操作やスクリーンリーダーの読み上げ順との乖離が生じる。

対応ブラウザ

基本構文

ライブデモ

center aligned. basic

space-between navigation

equalcolumn with flex-grow

実務での使いどころ

ナビゲーションバー

カードの横並びレイアウト

注意点

アクセシビリティ

参考リンク