Flexible 弹性盒子模型之CSS align-self 属性
生活随笔
收集整理的這篇文章主要介紹了
Flexible 弹性盒子模型之CSS align-self 属性
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
實例
居中對齊彈性對象元素內(nèi)的某個項:
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器的版本號。
緊跟在 -webkit-, -ms- 或 -moz- 后的數(shù)字為支持該前綴屬性的第一個版本。
| align-self | 21.0 | 11.0 | 20.0 | 9.0 7.0?-webkit- | 12.1 |
定義和用法
align-self 屬性定義flex子項單獨在側(cè)軸(縱軸)方向上的對齊方式。。
注意:align-self 屬性可重寫靈活容器的 align-items 屬性。
| auto |
| 否 |
| 否。請參閱?CSS3動畫屬性、CSS3動畫實例。 |
| CSS3 |
| object.style.alignSelf="center"?效果預(yù)覽 |
?
CSS 語法
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;屬性值
| auto | 默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 | 效果預(yù)覽 |
| stretch | 元素被拉伸以適應(yīng)容器。 | 效果預(yù)覽 |
| center | 元素位于容器的中心。 | 效果預(yù)覽 |
| flex-start | 元素位于容器的開頭。 | 效果預(yù)覽 |
| flex-end | 元素位于容器的結(jié)尾。 | 效果預(yù)覽 |
| baseline | 元素位于容器的基線上。 | 效果預(yù)覽 |
| initial | 設(shè)置該屬性為它的默認值。請參閱?initial。 | 效果預(yù)覽 |
| inherit | 從父元素繼承該屬性。請參閱?inherit。 |
轉(zhuǎn)載于:https://www.cnblogs.com/niuboren/p/6281393.html
總結(jié)
以上是生活随笔為你收集整理的Flexible 弹性盒子模型之CSS align-self 属性的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 详述JavaScript数组
- 下一篇: 【BZOJ 1528】 1528: [P