Css - Apa itu flexbox

Css - Apa itu flexbox

Definisi flexbox

Flexbox adalah sebuah model layout 1 dimensi yang dapat Mengatur jarak Dan penjajaran antar item dalam sebuah container

1 dimensi ?

Hanya dapat Mengatur satu dimensi pada saat tertentu,antara baris atau  kolom tidak bisa keduanya sekaligus.

Flexbox layout module
Sebuah modul yang menawarkan Cara yang efektip untuk menyusun, menjajarkan Dan mendistribusikan jarak antar item ,didalam sebuah container meskipun ukuran nya dinamis atau Kita tidak tau

Istilah pada flexbox

•main axis : sumbu utama dari sebuah container yang menentukan urutan dari penempatan items secara horizontal

•main start | main end : mulai Dan berakhir nya items yang disimpan didalam container

•main size: ukuran width / height dari container yang akan membuat dimensi dari items nya relatif terhadap main size

Display

.container {
display:flex; /*atau inline flex*/
}

Untuk membuat sebuah element parent menjadi flex-box Dan membuat Element-element didalamnya bisa berprilaku flex juga

Apa yang bisa kasih di container nya:

1.flex direction
Untuk Mengatur arah dari urutan element element didalamnya bisa secara horizontal kebalikannya atau vertikal kebalikannya.

.container {
flex-direction: row | row reverse | column |column-reverse
}

Itu maksud nya value nya bisa row atau column atau yang lainya pilih satu Nilai

2.flex wrap
Untuk Mengatur ketika element yang Kita buat itu sudah tidak muat lagi ke container dalam barisnya kalau pengen di turunin is bawah Kita pake flex wrap kalau tidak memakai flex wrap items nya akan memaksa selalu berada didalam container

.container {
flex-wrap: nowrap | wrap | wrap-reverse
}

Secara default element container akan berada pada satu baris meskipun ukuran nya sudah tidak cukup, wrap memungkinkan untuk memindahkan items ke baris bawahnya.

3. Justify-content
Untuk Mengatur rata dari element element didalam nya Kita bisa Mengatur menjadi rata Kiri rata Kanan Dan di tengah

.container {
justify-content:flex-start | flex-end | center | space-beetwen | space-around | space-evenly
}

1.flex start
Untuk Mengatur rata Kiri (normal

2.flex end
Untuk Mengatur rata Kanan

3.center
Untuk membuat di tengah tengah

4.space beetwen
Element pertama akan mepet Kiri element terakhir mepet ke kanan sisa nya akan dibuat mempunyai jarak yang sama

5.space around
Ngebagi rata sisi Kiri Dan Kanan nya

6.space evenly
Mengatur jarak antar items

4.align items
Ini untuk mengatur kesejajaran antar items secara vertikal

.container {
align-items: flex-start | flex-end | center | stretch | baseline
}

Silahkan coba coba Saja value nya

5.align-content
Sama seperti align items tetapi hanya berlaku ketika kontenya lebih dari satu baris

.container {
align-items: flex-start | flex-end | center | space-beetwen | space -around
}

Silahkan coba coba Saja sendiri.

Properti pada items
Kalau tadi properti yang bisa Kita kasih ke container nya sekarang properti yang dikasih ke items nya

1.order
Untuk Mengatur urutan dari element element nya ketika Kita sudah bikin element nya lalu Kita ingin nuker posisinya  misalkan Kita bikin element nya 3 kolom sidebar Kiri sidebar Kanan sidebar tengah ,ketika Kita ingin Mengatur urutan nya Kita cukup tuker urutan nya aja dengan order

Contoh:
.satu { order: 3;}
.Dua { order:1;}
.tiga {order:2;}

2.flex grow / flex
Untuk Mengatur ukuran dari so items nya

Contoh

.satu { flex-grow : 1;}
.dua { flex-grow:2;}
.tiga { flex-grow:1;}