Apa itu Flex Box?

CSS Flexible Box layout atau sering disebut dengan Flexbox layout adalah sebuah sistem CSS yang berfungsi untuk menyederhanakan tata letak tampilan website.

Flexbox dapat mengatur elemen secara responsif baik dalam arah horizontal maupun vertikal, tanpa perlu menggunakan tata letak tradisional yang lebih kompleks seperti float atau positioning.

Flexbox sangat berguna untuk membuat tata letak tampilan website yang dinamis, seperti menyamakan elemen di tengah, membagi ruang secara proporsional, atau mengatur elemen dengan ukuran berbeda agar tetap seimbang di berbagai perangkat.

 CSS Flex Items

Setelah membuat elemen kontainer dengan layout flexbox, maka anda dapat menggunakan beberapa properti flex item. Berikut beberapa properti yang sering digunakan dalam membangun tampilan website menggunakan flex yaitu :

• display
• flex-direction
• justify-content
• align-items
• align-content
• order
• dll

Level 1

 kita hanya mencoba melihat perbedaan jika kode Flexbox tidak di pakai dan dipakai dengan menghapus kode atau menambahakan kode ini  di awal dan akhir CSS /* */

LEVEL 2

kita harus menambahkan kodingan di HTML dan CSS

menambahkan kode <div class=”container”> serta diakhir dengan </div>
dan juga di CSS ada tambahan kode seperti

Level 3

pada awal gambar yang ada di samping seperti ini

dan kita disuruh membuatnya menjadi seperti ini

Memang terlihat susah dan menantang tapi ini sangat mudah hanya mengubannya di CSS
Terlihat di kode CSS akan ada kode yang tertulis .container-1 sampai .container-6, ikuti code ini di CSS

  .container-1 justify-content:center 
  .container-2 justify-content:space-around
  .container-3 justify-content:space-between
  .container-4 justify-content:space-evenly;
  .container-5 justify-content:flex-end;
  .container-6 Tidak ada

Level 4

diLevel ini hampir sama ada containernya kaya no 3 cuma beda propertinya ajh kali ini adalah
Align-items valuenya :
 flex-start;
 flex-end;
 center;
 baseline;
 stretch;

ikutin ajh kodingannya kaya tadi di CSS dan tambahin kodingan ini 

  .container-1 align-items:flex-start
  .container-2 align-items:flex-end
  .container-3 align-items:center;
  .container-4 align-items:baseline;
  .container-5 align-items:stretch;

Terima kasih 😁