Flexbox adalah salah satu fitur CSS paling populer untuk membuat layout halaman web. Dengan Flexbox, kamu bisa mengatur posisi elemen secara horizontal maupun vertikal dengan mudah tanpa perlu menggunakan float atau positioning yang rumit. Artikel ini akan membahas cara menggunakan Flexbox dari dasar hingga contoh praktis yang bisa langsung kamu coba.
Apa Itu Flexbox?
Flexbox (Flexible Box Layout) adalah model tata letak CSS yang memungkinkan elemen di dalam kontainer diatur secara fleksibel. Ada dua konsep utama dalam Flexbox:
-
Flex Container — elemen induk yang diberi properti
display: flex. - Flex Item — elemen anak langsung di dalam flex container.
Cara Mengaktifkan Flexbox
Untuk mengaktifkan Flexbox, cukup tambahkan display: flex pada elemen container:
.container {
display: flex;
}
Semua elemen anak di dalam .container otomatis menjadi flex item.
Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:
Cara Menggunakan Flexbox di CSS untuk Layout
Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.
Top comments (0)