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

align-selfプロパティ

 align-selfプロパティは、display:flex;が設定されたエレメント内の子エレメントを単独で配置設定できるプロパティです。 子エレメント内のスタイルに指定します。

 display:flex;が設定されたエレメントの、ある子エレメントの配置位置を単独で設定したい場合はこのalign-selfプロパティを使います。

align-selfプロパティの例(Exampleの参照
align-self: ;

関連するプロパティ

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

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

構文(Syntax)

CSS

align-self: auto | stretch | center | flex-start | flex-end | baseline;

DOM(JavaScript)

値の取得
object.style.alignSelf
値の設定
object.style.alignSelf="_value_"

値(Values)

Value摘要
auto初期値(default値)。
stretch親要素の高さに合わせる
center中心に。
flex-startcross axis(交差軸)のスタート位置。
flex-endcross axis(交差軸)のエンド位置。
baselineベースライン位置。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)auto
継承(Inherited)no
変化(Animatable)no

Example