Flexbox Pada CSS

Flexbox, atau Flexible Box Layout, adalah sebuah model tata letak di CSS yang memungkinkan Anda untuk mengatur elemen secara fleksibel dan responsif. Flexbox sangat berguna untuk membuat tata letak yang kompleks, seperti menu navigasi, galeri gambar, dan formulir.

Berikut adalah beberapa keunggulan Flexbox:

Fleksibel: Flexbox memungkinkan Anda untuk dengan mudah mengubah ukuran, urutan, dan penjajaran elemen dalam container.

Responsif: Flexbox dapat secara otomatis menyesuaikan tata letak Anda untuk berbagai ukuran layar, sehingga situs web Anda akan terlihat bagus di desktop, tablet, dan ponsel.

Mudah digunakan: Flexbox memiliki sintaks yang relatif mudah dipelajari dan digunakan.

Berikut adalah beberapa properti CSS yang paling umum digunakan untuk Flexbox:

display: flex: Properti ini mengubah container menjadi flex container.

flex-direction: Properti ini menentukan arah item-item dalam container.Nilai yang mungkin termasuk `row` (default), `column`, `row-reverse`, dan `column-reverse`.

justify-content: Properti ini menentukan bagaimana item-item dijustifikasi dalam container. Nilai yang mungkin termasuk `flex-start` (default), `flex-end`, `center`, `space-between`, dan `space-around`.

align-items:Properti ini menentukan bagaimana item-item dijajarkan dalam container. Nilai yang mungkin termasuk `flex-start` (default), `flex-end`, `center`, `baseline`, dan `stretch`.

align-self: Properti ini memungkinkan Anda untuk menyetel penjajaran individual untuk setiap item.

Berikut adalah contoh sederhana penggunaan Flexbox:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

Kode ini akan membuat container dengan tiga item yang dijajarkan secara horizontal, dengan ruang yang sama di antara mereka. Item-item tersebut juga akan dipusatkan secara vertikal dalam container.

Untuk mempelajari lebih lanjut tentang Flexbox, Anda dapat mengunjungi sumber daya berikut:

SUMBER :
-[MDN Web Docs: Flexbox]( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
-Flexbox Tutorial [URL yang tidak valid dihapus]
-A Complete Guide to Flexbox [URL yang tidak valid dihapus]