Codingku

flex-direction

Properti CSS flex-direction merupakan sub-properti dari modul layout kotak Flexbox.

Properti flex-direction ini memungkinkan kamu untuk mengatur arah item flex berjalan dalam wadah flex mereka.

Kamu juga dapat menentukan apakah item flex dijalankan dalam baris atau kolom.

Dan kamu juga dapat membuatnya berjalan dalam urutan terbalik.

Properti ini menerima nilai-nilai berikut:

  • row
  • row-reverse
  • column
  • column-reverse

Catatan: Jika elemen bukan item yang fleksibel, properti flex-direction tidak berpengaruh.

CSS Syntax

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

Javascript Syntax

object.style.flexDirection="column-reverse"

Attribute Value

default flex-direction: row;

Elemen akan secara otomatis diukur berdasarkan isinya, atau pada nilai width dan height apa pun jika ditentukan.

flex-direction: row-reverse;

Item-item flexbox disusun dengan cara yang berlawanan dengan arah teks, di sepanjang sumbu utama.

flex-direction: column;

Item-item flexbox disusun dengan cara yang sama seperti arah teks, di sepanjang sumbu silang.

flex-direction: column-reverse;

Item-item flexbox disusun dengan cara yang berlawanan dengan arah teks, di sepanjang sumbu silang