CSS align-items| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
align-items CSS プロパティとは
トピック：flexコンテナ内のアイテムのデフォルトの配置を指定する、事ができる
プロパティ align-items
- 基本 書式：セレクタ {
align-items:値;}実例 コード 1
フレキシブルな<div>要素のすべての項目の整列を中央揃えします。サンプル コードを試す div {
display: -webkit-flex;
/* Safari */
-webkit-align-items: center;
/* Safari 7.0+ */
display: flex;
align-items: center;
}プロパティ 定義と使用法
| デフォルト値・初期値 : | normal |
|---|---|
| 適用対象 : | 全要素 |
| 継承 : | 不可 |
| メディア : | visual |
| 計算値 : | 指定値 |
CSS Version | CSS3 |
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
| JavaScript 構文 | object.style.alignItems="funWebref" |
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
| CSSの構文 | align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit; |
プロパティ値
| 値 | 説明 |
|---|---|
baseline | アイテムは、フレックスコンテナのベースラインに配置される |
center | アイテムは、フレックスコンテナの中央に配置される |
flex-start | アイテムは、フレックスコンテナの先頭に配置される |
flex-end | アイテムは、フレックスコンテナの端に配置される |
stretch | フレックスコンテナにフィットするようにアイテムが高さ、幅が引き伸ばされる 空き領域は、すべてのアイテム間で等しく分割される これはデフォルト値です。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 | |||||
|---|---|---|---|---|---|---|
| align-items | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯52 | フルサポート◯12 | フルサポート◯20 | フルサポート◯11 | フルサポート◯12.1 | フルサポート◯7 |
first baseline , last baseline | 不明 | 不明 | フルサポート◯45 | 不明 | 不明 | 不明 |
start , end | 不明 | 不明 | フルサポート◯45 | 不明 | 不明 | 不明 |
left , right | 不明 | 不明 | フルサポート◯45 | 不明 | 不明 | 不明 |
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 | ||||||
|---|---|---|---|---|---|---|---|
| align-items | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet |
| 基本 サポート | フルサポート◯52 | フルサポート◯52 | フルサポート◯あり | フルサポート◯20 | フルサポート◯12.1 | フルサポート◯7 | 不明 |
first baseline , last baseline | 不明 | 不明 | 不明 | フルサポート◯45 | 不明 | 不明 | 不明 |
start , end | 不明 | 不明 | 不明 | フルサポート◯45 | 不明 | 不明 | 不明 |
left , right | 不明 | 不明 | 不明 | フルサポート◯45 | 不明 | 不明 | 不明 |
1
2
3
4
5
6
