Atribut flex-direction CSS

Definisi dan penggunaan

Properti flex-direction menentukan arah proyek elasti.

Keterangan:Jika elemen bukan proyek elasti, properti flex tidak berlaku.

Lihat Juga:

Panduan CSS:Boks Elastis CSS

Panduan CSS:Atribut flex

Panduan CSS:Atribut flex-basis

Panduan CSS:Atribut flex-flow

Panduan CSS:Atribut flex-grow

Panduan CSS:Atribut flex-shrink

Panduan CSS:Atribut flex-wrap

Panduan HTML DOM:Atribut flexDirection

Contoh

Atur arah item elasti di dalam elemen <div> dengan arah yang berlawanan:

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

Coba Sendiri

Grammar CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Nilai Atribut

Nilai Deskripsi
row Nilai Default. Menampilkan item elasti secara horizontal sebagai baris.
row-reverse Sama seperti baris, tetapi arahnya berlawanan.
column Menampilkan item elasti secara vertikal sebagai baris.
column-reverse Sama seperti baris, tetapi arahnya berlawanan.
initial Atur atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen orangtua. Lihat inherit.

Detil Teknis

Nilai Default: row
Inheritance: Tidak
Produksi Animasi: Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Grammar JavaScript: object.style.flexDirection="column-reverse"

Contoh Lainnya

Kombinasikan flex-direction dan media query untuk membuat tata letak yang berbeda untuk ukuran layar/perangkat yang berbeda:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Layout yang ber�� - Buat tata letak tunggal (100%) bukannya tata letak ganda (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuhnya.

Angka yang diikuti dengan -webkit- atau -moz- menunjukkan versi pertama yang menggunakan prefiks.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0