CSS flex-direction 屬性
實(shí)例
設(shè)置 <div> 元素內(nèi)彈性盒元素的方向?yàn)橄喾吹捻樞颍?/p>
div
{
display:flex;
flex-direction:row-reverse;
}
{
display:flex;
flex-direction:row-reverse;
}
嘗試一下 ?
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。
緊跟在 -webkit-, -ms- 或 -moz- 后的數(shù)字為支持該前綴屬性的第一個(gè)版本。
屬性 | |||||
---|---|---|---|---|---|
flex-direction | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
定義和用法
flex-direction 屬性規(guī)定靈活項(xiàng)目的方向。
注意:如果元素不是彈性盒對(duì)象的元素,則 flex-direction 屬性不起作用。
默認(rèn)值: | row |
---|---|
繼承: | 否 |
可動(dòng)畫化: | 否。請(qǐng)參閱 可動(dòng)畫化(animatable)。 |
版本: | CSS3 |
JavaScript 語(yǔ)法: | object.style.flexDirection="column-reverse" 嘗試一下 |
CSS 語(yǔ)法
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
屬性值
值 | 描述 | 實(shí)例 |
---|---|---|
row | 默認(rèn)值。靈活的項(xiàng)目將水平顯示,正如一個(gè)行一樣。 | 嘗試一下 ? |
row-reverse | 與 row 相同,但是以相反的順序。 | 嘗試一下 ? |
column | 靈活的項(xiàng)目將垂直顯示,正如一個(gè)列一樣。 | 嘗試一下 ? |
column-reverse | 與 column 相同,但是以相反的順序。 | 嘗試一下 ? |
initial | 設(shè)置該屬性為它的默認(rèn)值。請(qǐng)參閱 initial。 | 嘗試一下 ? |
inherit | 從父元素繼承該屬性。請(qǐng)參閱 inherit。 |
相關(guān)文章
CSS 參考手冊(cè):flex 屬性
CSS 參考手冊(cè):flex-basis 屬性
CSS 參考手冊(cè):flex-flow 屬性
CSS 參考手冊(cè):flex-grow 屬性
CSS 參考手冊(cè):flex-shrink 屬性
CSS 參考手冊(cè):flex-wrap 屬性
更多建議: