align-content プロパティ
align-content プロパティは、エレメントのレイアウトのための display:flex; において、主軸方向に対してクロス方向の子エレメントの配置を指定するプロパティです。
主軸方向をフレックスラインといいます。
align-content プロパティは、表示しきれない場合の折返しの指定である flex-wrap プロパティと併せて使用します。
display: flex;
flex-wrap: wrap;
align-content: center;
詳しくは Example を参照してください
display:flex; のデフォルトでは、横方向が主軸方向(フレックスライン)です。垂直方向(クロス方向)が縦方向になります。 flex-direction によってフレックスラインの方向を変更することができます。
align-itemsプロパティと似ていますが、align-itemsプロパティはフレックスアイテムを整列するプロパティです。
ページ内 Index
構文(Syntax)
CSS
align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit ;
DOM ( JavaScript )
object.style.alignContent;
object.style.alignContent=" stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit ";
値(Values)
| Value | 摘要 |
|---|---|
| stretch | 初期値(default値)。均等に配置 |
| center | 親エレメントの垂直方向の中心に配置 |
| flex-start | 親エレメントの左上端から配置 |
| flex-end | 親エレメントの左下端から配置 |
| space-between | 親エレメントの垂直方向の両端揃え |
| space-around | 親エレメントの垂直方向の均等揃え |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
| 初期値(Default value) | stretch |
| 継承(Inherited) | no |
| 変化(Animatable) | no |
Example
関連するプロパティ
display: flex; には以下の関連するプロパティがあります。これらを使って大きさや配置を調整します。
| プロパティ | 概要 |
|---|---|
| flex-basis | フレックスアイテムの基本となる幅 |
| align-content | フレックスラインの垂直方向の配置 |
| align-items | 初期の配置位置 |
| align-self | フレックスアイテムの配置位置 |
| justify-content | 主軸方向での配置を指定 |
| flex-wrap | 横並びにしたフレックスアイテムの折り返し |
| flex-direction | フレックスアイテムの縦または横の並び |
| flex-flow | flex-direction、flex-wrapを一括指定 |
| order | フレックスアイテムの順序を変更 |
