CSS3 properti kotak-arah
contoh
Dari kanan ke kiri, untuk menampilkan kotak div elemen anak:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-direction:row-reverse;
/* Firefox */
display:-moz-box;
-moz-box-direction:reverse;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-direction:reverse;
/* W3C */
display:box;
box-direction:reverse;
}
Coba »
Dukungan Browser
Browser utama saat ini tidak mendukung properti kotak-arah.
Internet Explorer 10 milik pribadi dengan dukungan -MS-flex-arah.
Firefox dengan milik pribadi - dukungan MOZ-box-arah.
Safari dan Chrome dengan milik pribadi sifat -webkit-box-arah.
Catatan: Internet Explorer 9 dan versi sebelumnya dari IE tidak mendukung kotak fleksibel.
Definisi atribut dan petunjuk
atribut kotak-arah menentukan elemen anak dari arah mana kotak display.
default: | normal |
---|---|
mewarisi: | tidak |
versi: | CSS3 |
sintaks JavaScript: | obyek .style.boxDirection = "reverse" |
tatabahasa
Kotak-arah: normal | membalikkan | mewarisi;
nilai | deskripsi |
---|---|
normal | Dalam default tampilan orientasi sub-elemen. |
membalikkan | Di arah berlawanan untuk elemen anak. |
mewarisi | Anda harus mewarisi nilai properti kotak-arah dari sub-elemen |