備忘録的プログラミングリファレンス

align-content プロパティ

 align-content プロパティは、エレメントのレイアウトのための display:flex; において、主軸方向に対してクロス方向の子エレメントの配置を指定するプロパティです。
 主軸方向をフレックスラインといいます。

 align-content プロパティは、表示しきれない場合の折返しの指定である flex-wrap プロパティと併せて使用します。

フレックスアイテムを垂直方向の中心に
display: flex;
flex-wrap: wrap;
align-content: center;

 display:flex; のデフォルトでは、横方向が主軸方向(フレックスライン)です。垂直方向(クロス方向)が縦方向になります。 flex-direction によってフレックスラインの方向を変更することができます。

 align-itemsプロパティと似ていますが、align-itemsプロパティはフレックスアイテムを整列するプロパティです。

関連するプロパティ

 以下のような関連するプロパティがあります。

display:flex;複数のエレメントを緩やかに配列
align-items初期の配置位置
align-selfフレックスアイテムの配置位置
justify-content主軸方向での配置を指定
flex-wrap横並びにしたフレックスアイテムの折り返し
flex-basisフレックスアイテムの基本となる幅
flex-directionフレックスアイテムの縦または横の並び
flex-flowflex-direction、flex-wrapを一括指定

構文(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