CSSalign-items屬性
CSS 參考手冊
定義和用法
align-items:設置了 flex 容器的對齊方式。
提示:使用每個 flex 對象元素的 align-self 屬性可重寫 align-items 屬性。
默認值: | stretch |
---|---|
繼承: | 否 |
可動畫化: | 否。請參閱可動畫化(animatable)。 |
版本: | CSS3 |
JavaScript 語法: | object.style.alignItems="center"嘗試一下 |
CSS 語法
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
屬性值
值 | 描述 | 測試 |
---|---|---|
stretch | 默認,拉伸元件以適應容器。 | 測試 ? |
center | 中心元素在容器內。 | 測試 ? |
flex-start | 位置元素在容器的開頭。 | 測試 ? |
flex-end | 位置元素在容器的末端。 | 測試 ? |
baseline | 位置元素在容器的基線。 | 測試 ? |
initial | 設置為默認值。請參閱initial。 | 測試 ? |
inherit | 從其父元素繼承此屬性。請參閱inherit。 |
實例
實例
居中對齊彈性盒的各項 <div> 元素:
div
{
display: flex;
align-items:center;
}
{
display: flex;
align-items:center;
}
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器的版本號。
緊跟在 -webkit-, -ms- 或 -moz- 后的數字為支持該前綴屬性的第一個版本。
屬性 | |||||
---|---|---|---|---|---|
align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- | 12.1 |
相關文章
CSS 參考手冊:align-content 屬性
CSS 參考手冊:align-self 屬性
CSS 參考手冊