CSS align-self| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

align-self CSS プロパティとは

トピック：flexコンテナ内のアイテムのデフォルトの配置を指定する事ができる

プロパティ align-self

    基本 書式：セレクタ {align-self:値;}

実例 コード 1

フレキシブルな要素内の項目の1つの整列を中心にします。サンプル コードを試す
     #webref {
        -webkit-align-self: center; 
    /* Safari 7.0+ */
         align-self: center;
    }

プロパティ 定義と使用法

デフォルト値・初期値 :自動
適用対象 :flex items, grid items,absolutely-positioned
継承 :不可
メディア :visual
計算値 :絶対配置された要素や、他のすべてのボックスのalign-itemsの計算値に自動的に計算されます。（既存のキーワードを差し引いたもの） その動作は、justify-self レイアウトモデルに依存します。 そうでなければ、指定された値。
CSS Version CSS3
アニメーションの種類 :個別 アニメーション可能なプロパティ 一覧
JavaScript 構文 object.style.alignSelf="funWebref"
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

プロパティ値

値説明
auto要素は、親要素 align-itemsプロパティの計算された値を取ります。親要素がない場合は、ストレッチするこれはデフォルト値です。
baseline要素は、フレックスコンテナのベースラインに配置される
centerエレメントはフレックスコンテナの中央に配置されています。
flex-start要素は、フレックスコンテナの先頭に配置される
flex-end要素はフレックスコンテナの端に配置される
stretch要素はフレックスコンテナに合うように高さ幅が引き伸ばされる
inheritこのプロパティをデフォルト値に設定する
inherit親要素からこのプロパティを継承する

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
align-selfChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯36フルサポート◯12フルサポート◯20フルサポート◯11フルサポート◯12.1サポートなし✖
start ,end 不明 不明フルサポート◯あり 不明 不明 不明
left ,right 不明 不明フルサポート◯52 不明 不明 不明
baseline 不明 不明フルサポート◯あり 不明 不明 不明
first baseline ,last baseline 不明 不明フルサポート◯52 不明 不明 不明
stretch 不明 不明フルサポート◯52 不明 不明 不明

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
align-selfAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯36フルサポート◯36フルサポート◯ありフルサポート◯ありサポートなし✖サポートなし✖ 不明
start ,end 不明 不明 不明 不明 不明 不明 不明
left ,right 不明 不明 不明フルサポート◯52 不明 不明 不明
baseline 不明 不明 不明フルサポート◯あり 不明 不明 不明
first baseline ,last baseline 不明 不明 不明フルサポート◯52 不明 不明 不明
stretch 不明 不明 不明フルサポート◯52 不明 不明 不明
：align-self 関連記事
CSS align-self| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS align-self | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS