box-direction

闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧湱鈧懓瀚崳纾嬨亹閹烘垹鍊為悷婊冾樀瀵悂寮介鐔哄幐闂佹悶鍎崕閬嶆倶閳哄啰纾奸柟閭﹀弾濞堟粓鏌″畝鈧崰鏍箖瑜斿畷濂告偄閸濆嫬娈ラ梻鍌欑閹诧繝宕圭憴鍕弿闁圭虎鍠栭悡姗€鏌熸潏楣冩闁稿鍔欓幃妤呭捶椤撶倫銏°亜閵夛妇绠樼紒杈ㄦ尰閹峰懘宕崟纰樺亾瀹€鍕厱闁靛ǹ鍎抽崺锝団偓娈垮枛椤兘寮幇顓炵窞濠电姴瀚烽崥鍛存⒒娴ｇ懓顕滅紒璇插€块獮澶娾槈閵忕姷顔掔紓鍌欑劍宀ｅ潡宕㈤幖浣光拺闁告稑锕ｇ欢閬嶆煕閻樻剚娈滅€规洘鍔欓獮鍥偋閸垹骞愰柣搴″帨閸嬫捇鎮楅敐搴″闁糕晛鐭傚铏光偓鍦閸ゆ瑦绻涢幘顔芥暠缂佸倹甯￠弫鍐磼濞戞ḿ妾┑鐘灱濞夋稑螞濞嗘垟鍋撳鍗炴灈婵﹤顭峰畷鎺戔枎閹搭厽袦闂備胶顢婃慨銈囧垝閹惧磭鏆﹂柟瀛樼妇濡插牓鏌嶉崹娑欐澒闁稿鎹囬弫鍐磼濞戞ǚ鍋撴繝姘厽闁挎繂鎳撶€氭壆绱掓笟濠勭暤婵☆偄鎳橀、鏇㈠閳ユ剚妲辩紓鍌欑椤戝棛鏁垾宕囨殾闁归偊鍠楃€氭碍绻涢弶鎴剱闁哄倵鍋撳┑锛勫亼閸婃牕螞娴ｈ倽娑㈠礋椤掍礁寮块梺閫炲苯澧存慨濠呮缁瑥鈻庨幆褍澹夐梻浣筋潐閻℃洟顢氳椤㈡岸濡烽埡浣侯槹濡炪倖鐗楀銊╂偪閳ь剚淇婇悙顏勨偓鏍箰閻愵剚鍙忛柡澶嬪焾閸ゆ洟鏌熼幆鏉啃撻柍閿嬪笒闇夐柨婵嗙墛椤忕娀鎮介娑氭创闁哄矉绱曟禒锔炬嫚閹绘帩娼庢俊銈囧Х閸嬫盯藝閻㈢ǹ鏋侀柟鍓х帛閸嬫劙鏌涢幇顓犮偞闁稿鎹囬幊婊堟倷闁稓鐩庨梻浣告惈濞诧箓銆冮崨顔绢洸濡わ絽鍟埛鎴︽煕濠靛棗顏柣蹇涗憾閺屾盯鎮╅崘鎻掝潚闁芥ɑ绻堥弻锝呂旈埀顒勬偋婵犲洤纾块柣鏂垮悑閻撳啴鏌曟径鍫濆姎闁哄棜浜槐鎺楁偑閸涱垳袦濠殿喖锕︾划顖炲箯閸涘瓨鍤嶉柕澶涚岛閸嬫捇宕橀鐣屽幗闂佺娅ｉ崑鐔兼偩閸偒娈介柣鎰綑閻忓鈧娲橀崕濂嘎ㄦ笟鈧弻娑㈠Χ閸℃ḿ顦ㄩ梺闈涙搐鐎氫即鐛幒妤€绠ｆ繝鍨姃閹綁姊洪幖鐐插姕闁圭ǹ鍟块～蹇涙惞閻熸澘顕ч梺鍝勬川閸嬫盯鍩涙径濠庢富闁靛牆鍟俊鑲╃磼缂佹ê鐏╅柍褜鍓熷ḿ褔濡堕幖浣告瀬闁瑰墽绮弲鎼佹煥閻曞倹瀚�

Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

语法：

box-direction：normal | reverse

默认值：normal

适用于：伸缩盒容器

继承性：无

动画性：否

计算值：指定值

取值：

normal：
设置伸缩盒对象的子元素按正常顺序排列
reverse：
反转伸缩盒对象的子元素的排列顺序

说明：

设置或检索伸缩盒对象的子元素的排列顺序是否反转。
  • 可以通过box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果；
  • 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果；
  • 可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果；
  • 可以通过box-orient:vertical + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果；
  • Firefox设置box-direction为reverse时，在将元素的排列顺序反转的同时也将元素的对齐方式逆转了；Safari和Chrome则只是反转元素排列顺序
  • 对应的脚本特性为boxDirection。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-11.0 2.0-40.0-moz- 4.0-45.0-webkit- 6.0-8.0-webkit- 15.0-29.0-webkit- 6.0-8.3-webkit- 2.1-4.4.4-webkit- 18.0-42.0-webkit-

示例：