align-content CSS プロパティとは
トピック：横軸(垂直方向)に余分なスペースがある場合、フレックスコンテナ内のフレキシブルコンテナのアイテムを整列させることができるこのプロパティは、単一行のフレキシブルボックスには影響しないさらに、CSSのjustify-contentプロパティを使用して、主軸上のアイテムを(水平に)整列させることができる
プロパティ align-content
基本 書式：セレクタ {align-content:値;}
実例 コード 1
フレックスコンテナの中心に向かってラインをパックするサンプル コードを試す div {
width: 100px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | normal |
|---|
| 適用対象 : | multi-line flex containers |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.alignContent="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
center | アイテムは、フレックスコンテナの中央に配置される |
flex-start | アイテムは、フレックスコンテナの先頭に配置される |
flex-end | アイテムは、フレックスコンテナの端に配置される |
space-between | アイテムは、隣接する2つのアイテム間のスペースが同じようにフレックスコンテナに均等に分散される |
space-around | アイテムは、フレックスコンテナ内で均等に分布し、各アイテムの周りのスペース（つまり、前、間、後）が同じになるようにする |
stretch | フレックスコンテナにフィットするようにアイテムが高さ、幅が引き伸ばされる 空き領域は、すべてのアイテム間で等しく分割される これはデフォルト値です。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| align-content | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯29 | フルサポート◯12 | フルサポート◯28 | フルサポート◯11 | フルサポート◯12.1 | フルサポート◯9 |
|---|
space-evenly | サポートなし✖ | サポートなし✖ | フルサポート◯52 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
start ,end | フルサポート◯あり | サポートなし✖ | フルサポート◯あり | サポートなし✖ | フルサポート◯あり | 不明 |
|---|
left ,right | フルサポート◯あり | サポートなし✖ | 未対応 52— 60 | サポートなし✖ | フルサポート◯あり | 不明 |
|---|
baseline | フルサポート◯57 | サポートなし✖ | フルサポート◯あり | サポートなし✖ | フルサポート◯44 | 不明 |
|---|
first baseline ,last baseline | サポートなし✖ | サポートなし✖ | フルサポート◯52 | サポートなし✖ | サポートなし✖ | 不明 |
|---|
stretch | フルサポート◯57 | サポートなし✖ | フルサポート◯52 | サポートなし✖ | フルサポート◯44 | 不明 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| align-content | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯29 | フルサポート◯29 | フルサポート◯あり | フルサポート◯28 | フルサポート◯12.1 | フルサポート◯9.2 | フルサポート◯あり |
|---|
space-evenly | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯52 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
start ,end | フルサポート◯あり | フルサポート◯あり | サポートなし✖ | サポートなし✖ | フルサポート◯あり | 不明 | フルサポート◯あり |
|---|
left ,right | フルサポート◯あり | フルサポート◯あり | サポートなし✖ | 未対応 52— 60 | フルサポート◯あり | 不明 | フルサポート◯あり |
|---|
baseline | フルサポート◯57 | フルサポート◯57 | サポートなし✖ | フルサポート◯あり | フルサポート◯44 | 不明 | フルサポート◯7.0 |
|---|
first baseline ,last baseline | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯52 | サポートなし✖ | 不明 | サポートなし✖ |
|---|
stretch | フルサポート◯57 | フルサポート◯57 | サポートなし✖ | フルサポート◯52 | フルサポート◯44 | 不明 | フルサポート◯7.0 |
|---|
align-content | CSS プロパティ 値| 意味 使い方 実例 – WebRef