Skip to main content

B.7.1.1. Flex Container

Pada chapter ini kita akan membahas lebih detil lagi mengenai konsep flex-container yang telah kita bahas pada chapter sebelumnya.

Sebuah elemen dapat kita jadikan sebagai flex-container. Sebuah elemen di sebut sebagai flex-container ketika di dalamnya memiliki beberapa anak dan elemen tersebut kita set display menjadi flex.

Pada kode sebelumnya kita telah membuat sebuah div yang kita beri class flex-container . Secara bawaan, display pada sebuah element akan di set menjadi block yang artinya elemen child nya akan memiliki lebar 100% karena mengikuti lebar dari parent element yaitu flex-container. Untuk lebih jelasnya coba teman teman perhatikan kode berikut

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Maka hasilnya akan terlihat seperti:

Output

Bisa teman-teman lihat, flex-item akan memiliki lebar penuh mengikuti lebar dari parent-_nya yaitu flex-container. Ini terjadi karena secara bawaan _display dari flex-container adalah block.

Sedangkan ketika kita mengubah display dari flex-container menjadi flex , maka flex-item tidak akan mengikuti lebar dari flex-container atau parent containernya, tetapi lebar dari flex-item akan di atur untuk menyesuaikan lebar dari content yang terkandung di dalamnya. Coba teman-teman ubah display dari flex-container nya menjadi flex.

.flex-container {
  display: flex;
}

.flex-item {
  /*......*/
}

Output

Bisa teman-teman lihat flex-item akan menyesuaikan lebar dari konten nya ketika display dari parent di set menjadi flex.

B.7.1.1.1. Karakteristik flex-container​

Coba perhatikan gambar di bawah ini:

Output

Pada gambar di atas terdapat sebuah flex-container yang di dalamnya terdapat dua child yang kita beri nama flex-item . Secara default sebuah container yang di set _display_nya ke flex akan memiliki dua macam _axis_ yaitu cross axisdan main-axis .

  • main axis adalah sumbu utama dari sebuah flex-container yang secara bawaan memiliki rentang horizontal (akan menjadi vertical jika flex-direction kita set ke column atau column-reverse).
  • cross axis adalah sumbu yang tegak lurus terhadap main axis yang memiliki rentang relatif menyesuaikan main axis nya.

Oke, sekarang sudah faham ya tentang karakteristik dari flex container ini.

Ketika sebuah elemen kita jadikan sebagai flex-container atau container yang memiliki display flex, ada beberapa keuntungan di antaranya, kita bisa mengatur arah (direction) dari anak-anak (child) dengan menggunakan properti flex-direction, mengatur pembungkusan dengan properti flex-wrap, mengatur penyelarasan di sumbu utama menggunakan justify-content, mengatur penyelarasan di sumbu silang menggunakan align-items, mengatur penyelarasan isi dengan menggunakan align-content dan masih banyak lagi ya!

Hmm apa ya itu 🤔? untuk lebih detailnya kita akan bahas di chapter selanjutnya ya!

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.7-css-layouting/B.7.1-flexbox/B.7.1.1-flex-container