CSS flex-direction 屬性

CSS 參考手冊(cè) CSS 參考手冊(cè)

實(shí)例

設(shè)置 <div> 元素內(nèi)彈性盒元素的方向?yàn)橄喾吹捻樞颍?/p>

div
{
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 屬性


CSS 參考手冊(cè) CSS 參考手冊(cè)