align-self
align-self
は CSS のプロパティで、グリッドやフレックスのアイテムの align-items
の値を上書きします。グリッドでは、アイテムはグリッド領域内で配置されます。フレックスボックスでは、アイテムは交差軸上で配置されます。
試してみましょう
このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが auto
の場合、align-self
は無視されます。
構文
/* キーワード値 */
align-self: auto;
align-self: normal;
/* 位置による配置 */
/* align-self は left および right の値をとりません */
align-self: center; /* アイテムを中央付近に配置 */
align-self: start; /* アイテムを起点に配置 */
align-self: end; /* アイテムを末端に配置 */
align-self: self-start; /* アイテムを起点に詰めて配置 */
align-self: self-end; /* アイテムを末端に詰めて配置 */
align-self: flex-start; /* フレックスアイテムを起点に配置 */
align-self: flex-end; /* フレックスアイテムを末端に配置 */
/* ベースラインによる配置 */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* 寸法が 'auto' のアイテムをコンテナーに合うよう伸長 */
/* あふれたときの配置 */
align-self: safe center;
align-self: unsafe center;
/* グローバル値 */
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: unset;
値
auto
-
親の
align-items
の値で計算します。 normal
-
このキーワードの効果は、現在のレイアウトモードに依存します。
- 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには
start
のように動作し、その他の絶対位置ボックスにはstretch
のように動作します。 - 絶対位置指定レイアウトの固定位置指定時は、このキーワードは
stretch
と同様に動作します。 - フレックスアイテムでは、このキーワードは
stretch
と同様に動作します。 - グリッドアイテムでは、このキーワードは
stretch
のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスはstart
のように動作します。 - ブロックレベルボックスと表のセルでは、プロパティは適用されません。
- 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには
self-start
-
アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。
self-end
-
アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。
flex-start
-
このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。
flex-end
-
このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。
center
-
このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。
baseline
,first baseline
,last baseline
-
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline
の代替配置はstart
、last baseline
の代替配置はend
です。 stretch
-
アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が
auto
であった場合、アイテムの寸法はmax-height
/max-width
(または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、auto
が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。 safe
-
アイテムのサイズが配置コンテナーを超えるとき、アイテムは配置モードが
start
であったかのように配置されます。 unsafe
-
アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。
公式定義
初期値 | auto |
---|---|
適用対象 | フレックスアイテム、グリッドアイテム、絶対位置指定のボックス |
継承 | なし |
計算値 | 絶対位置指定要素に対しては auto は自分自身に対して計算し、それ以外のすべてのボックスに対しては親の align-items の計算値 (から古いキーワードを引いた値) に計算し、親が無ければ start になる。この動作は justify-self で説明したとおり、レイアウトモデルの依存する。それ以外の場合は指定された値となる。 |
アニメーションの種類 | 離散値 |
形式文法
例
HTML
<section>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
</section>
CSS
section {
display: flex;
align-items: center;
height: 120px;
background: beige;
}
div {
height: 60px;
background: cyan;
margin: 5px;
}
div:nth-child(3) {
align-self: flex-end;
background: pink;
}
結果
仕様書
Specification |
---|
CSS Box Alignment Module Level 3 # align-self-property |
CSS Flexible Box Layout Module Level 1 # align-items-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスコンテナー内のアイテムの配置
- CSS グリッドガイド: グリッドレイアウトのボックス配置
- CSS ボックス配置
align-items
プロパティ