Cara Membuat Kolom dengan Flexbox

04/12/2019    Risman Hakim    704     Website

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..

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More