Properti arah fleksibel CSS

Sebelumnya _ Referensi CSS Lengkap Selanjutnya _

Contoh

Atur arah item fleksibel di dalam elemen <div> dalam urutan terbalik:

div {
display: flex;
flex-direction: row-reverse;
}

Tip: Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Properti flex-directionmenentukan arah item fleksibel.

Catatan: Jika elemen bukan item fleksibel, flex-directionproperti tidak berpengaruh.

Nilai bawaan:	baris
Diwarisi:	tidak
Animasi:	tidak. Baca tentang animasi
Versi: kapan:	CSS3
Sintaks JavaScript:	objek .style.flexDirection="column-reverse"

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Angka yang diikuti oleh -webkit- atau -moz- menentukan versi pertama yang berfungsi dengan awalan.

Property
flex-direction	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

Sintaks CSS

Nilai properti

Value	Description	Play it
row	Default value. The flexible items are displayed horizontally, as a row
row-reverse	Same as row, but in reverse order
column	The flexible items are displayed vertically, as a column
column-reverse	Same as column, but in reverse order
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Lebih Banyak Contoh

Contoh

Menggunakan flex-directionbersama dengan kueri media untuk membuat tata letak yang berbeda untuk ukuran layar/perangkat yang berbeda:

.flex-container {
display: flex;
flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}