Mengenal Flexbox - Display Flex CSS dan kegunaanya Pemprograman Web
Materi kali ini admin bakal jelasin tentang Flexbox apa sih Flexbox atau Display : Flex. Bagaikmana kegunaanya buat website kita? apa kita harus pake flex ketika sedang mendesain web? Trus kalau pake apa keuntungannya? kalau kalian bingung tentang itu, beruntunglah, ko beruntung? ya beruntung kamu sedang ada di artikel yang tepat.
jadi Flexbox itu bisa digunakan ketika kita ingin mengatur suatu bagian dari element html kita, contohnya :
> jika kita ingin membuat suatu element menjadi di tengah pas
> atau kita mau bikin element yang tadinya berderet kebawah jadi berderet kesamping.
> atau kita pengen bikin suatu elemen yang didalemnya berisi banyak elemen
Lihat contoh dibawah ini, rapih kan...
itu bisa dilakukan dengan mudah dengan menggunakan Flexbox.
sintak yang sering digunakan
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
Flexbox merubah elemen yang berada didalam elemen itu sendiri.
Contohnya pada Screenshot dibawah saya punya dua element :
- Elemen Abu-Abu
- Elemen Ungu
Yang akan kita atur posisinya adalah ELEMEN UNGU, maka kita memasukan sintaks CSS Flexbox di ELEMENT ABU.
Bingung ya? ayo kota coba....
sintaks wajibnya adalah :
display: flex;
1. BAGAI MANA CARA MEMBUAT ELEMEN UNGU TENGAH VERTIKAL
Kita bisa menggunakan sintaks :
justify-content: center;
2. BAGAI MANA CARA MEMBUAT ELEMEN TENGAH VERTIKAL & HORIZONTAL
Kita bisa menggunakan sitaks :
justify-content: center;
align-items: center;
2. BAGAI MANA CARA MEMBUAT BANYAK ELEMEN TENGAH DAN JARAK ANTARA ELEMEN SAMA
Kita bisa menggunakan sitaks :
align-items: center;
flex-direction: row;
justify-content: space-around;
Supaya makin jelas admin kasih Source code full nya, semoga kalian paham ya
HTML :
<div class="abu-abu">
<div class="ungu"></div>
<div class="ungu"></div>
<div class="ungu"></div>
<div class="ungu"></div>
</div>
CSS :
.abu-abu {
width: 100%;
height: 100vh;
background-color: rgb(161, 161, 161);
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;
justify-items: flex-end;
}
.ungu {
width: 200px;
height: 200px;
background-color: royalblue;
}
Kalo kalian sudah faham akan kita lanjutkan ke pembahasan yang selanjutnya , contoh pembahasan selanjutnya seperti ini
Jika kalian mengalami kesulitan dalam belajar di blog ini, jangan malu-malu langsung aja tanya admin melalui media sosial yang tertera di blog ini, admin pasti bantuin kamu
Semangat dan pantang menyerah
« Terbaru
Postingan Lebih Baru
Terlama »
Postingan Lama