Flexbox merupakan mode layout terbaru yang menjadi fitur dari CSS3. Sebelumnya kita mengenal mode block, inline, table dan lain sebagainya, kita juga sering melibatkan Floating untuk layouting, padahal float sendiri bukan diperuntukkan untuk membuat layout melainkan untuk memposisikan gambar dalam text.
Flexbox merupakan mode layout yang digunakan untuk mengatur elemen di suatu halaman web. Flexbox ini akan mengatur ukuran dari elemen childnya secara otomatis, dan mampu beradaptasi dengan ukuran container-nya. Permasalahan paling sederhana yang mampu diselesaikan oleh Flexbox adalah Vertical Centering (memposisikan element tepat berada di tengah), atau mengatur agar setiap kolom yang berada dalam layout memiliki tinggi yang sama. Dengan menggunakan Flexbox juga mempermudah kita untuk mengatur responsif halaman website kita saat dibuka di device dengan berbagai macam resolusi.
Ada dua komponen utama sebuah layout Flexbox yaitu container dan item. Berikut ini HTML untuk contoh kita yang memiliki sebuah container dan empat item:
<div class="container">
<div class="card bg-card1">1</div>
<div class="card bg-card2">2</div>
<div class="card bg-card3">3</div>
<div class="card bg-card4">4</div>
</div>
Agar tampilannya lebih menarik, saya juga tambahkan style standar untuk memberikan warna pada masing-masing card.
.container{
width: auto;
height: auto;
background: #ecf0f1;;
margin: 50px auto;
padding: 20px;
font-family: Poppins, "Helvetica Neue", arial, sans-serif;
}
.card{
width: 120px;
height: 120px;
text-align: center;
line-height: 120px;
color: #fff;
font-weight: bold;
}
.bg-card1{
background-color: #1dd0ad;
}
.bg-card2{
background-color: #9b59b6;
}
.bg-card3{
background-color: #e67e22;
}
.bg-card4{
background-color: #f1c40f;
}
Jika kita buka file tersebut, maka tampilan yang akan kita lihat seperti berikut.
Untuk mengubah layout ini untuk menggunakan Flexbox, cukup berikan kelas container properti CSS berikut:
.container{
display: flex;
}
maka tampilan yang akan kita lihat seperti berikut.
Penambahkan properti tadi akan membuat layout sebelumnya menjadi sejajar secara horizontal.
Properti Pada Flexbox Yang Sering Digunakan
1. Flex Direction
Secara default, setiap kali kita menerapkan layout mode flex pada container, maka element-element didalamnya akan bertingkah seperti Kolom. Ini disebabkan arah dari flexbox secara default adalah row (horizontal).
.container {
flex-direction: column;
}
/* Pilihan valuenya ada: row | row-reserve | column | column-reserve */
2. Justify Content
justify-content digunakan untuk mensejajarkan item-item diantara flexbox agar container dari flexbox tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex dalam satu baris tersebut tidak flexsibel atau meskipun flexsibel tapi sudah mencapai batas ukuran maksimum.
.container {
justify-content: center;
}
/* Pilihan valuenya ada: flex-start | flex-end | center | space-between | space-arround | baseline */
3. Align Items
align-items mendefinisikan bagaimana item-item pada container flex tersebut diletakkan sepanjang garis tegak lurus pada sumbu utama (cross-axis). Ini sama halnya dengan justify-content tapi peletakkannya saja yang berbeda.
.container {
align-items: flex-end;
}
/* Pilihan valuenya ada: flex-start | flex-end | center | baseline | stretch*/
4. Align Content
align-content digunakan untuk mensejajarkan garis flex container ketika ada ruang kosong secara garis tegak lurus pada sumbu utama (cross-axis). Sama halnya dengan justify-content yang mana mensejajarkan individu items pada main axis. Harap diperhatikan: Properti ini tidak dapat diaplikasikan jika hanya terdapat satu flex item.
.container {
justify-content: space-arround;
}
/* Pilihan valuenya ada: flex-start | flex-end | center | space-between | space-arround | baseline */
Sulfikardi
Web Design & Web Programming
Halo, saya seorang Web Developer yang terbiasa mengembangkan website
menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis
15 Apr 2021
Sulfikardi
3401
Web Design
