Cara Membuat Kolom dengan Flexbox

Cara Membuat Kolom dengan Flexbox - Layout pada sebuah tampilan website menjadi komponen yang harus diperhatikan, karena dengan penerapan layout yang sesuai dan tepat akan menjadi tampilan website yang bagus. Contoh sederhana adalah penerapan kolom - kolom pada tiap halaman tentu akan berbeda. Nah, pada kesempatan kali ini saya akan bagikan tutorial bagaimana Cara Membuat Kolom dengan Flexbox, tentu dengan mempelajari cara membuat kolom akan memudahkan kalian dalam menentukan kolom - kolom pada halaman website. Untuk lebih jelas bagaimana cara membuatnya, ikuti langkah - langkahnya berikut ini.

Pada kasus yang akan kita buat kali ini adalah membuat kolom sebanyak 3 dengan memanfaatkan properti CSS yaitu flex, properti flex akan memberikan kolom yang sama ukurannya. Tentu syaratnya parent yang membungkus kolom tersebut sudah diberikan properti display agar bisa terbagi menjadi kolom. Supaya lebih jelas akan saya praktekan berikut ini.

Silahkan kalian buat file index.html kemudian silahkan ketikan struktur HTML sederhana untuk membuat kolom sebanyak 3 kolom seperti berikut.

<body>
    <div class="container">
        <div class="box-1">
            <p>DUMET School adalah tempat Kursus Website, Digital Marketing, dan Desain Grafis yang berlokasi di Jakarta dan Depok.</p>
        </div>
        <div class="box-2">
            <p>DUMET School adalah tempat Kursus Website, Digital Marketing, dan Desain Grafis yang berlokasi di Jakarta dan Depok.</p>
        </div>
        <div class="box-3">
            <p>DUMET School adalah tempat Kursus Website, Digital Marketing, dan Desain Grafis yang berlokasi di Jakarta dan Depok.</p>
        </div>
    </div>
</body>

Pada struktur HTML diatas telah dibuat 3 div dengan class box, ini berarti kita akan membuat 3 kolom, selanjutnya agar kolom bisa terbentuk kita akan atur dengan CSS, silahkan kalian ketikan sintak CSS berikut ini.

<style>
    .container {
        width: 600px;
        height: 350px;
        justify-content: center;
        display: flex; 
    }
    .box-1 {background: darkcyan; padding: 10px; flex: 1;}
    .box-2 {background: darkorange; padding: 10px; flex: 1;}
    .box-3 {background: darkred; padding: 10px; flex: 1;}
</style>

Dari sintak diatas telah diset pada class container yaitu display: flex tutjuannya agar class box yang kita buat bisa terbagi menjadi kolom - kolom, selanjutnya pada class box telah diset properti flex yang berfungsi untuk membagi sama rata pada ukurannya kolomnya. Silahkan kalian simpan filenya kemudian lihat pada browser masing - masing untuk melihat hasilnya.

Itulah Cara Membuat Kolom dengan Flexbox, semoga dengan pembahasan dan tutorial diatas bermanfaat selamat mencoba dan sampai jumpa lagi..

4 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat