Halo teman – teman selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan seputar dunia website. Pada kesempatan kali ini kita akan belajar tentang Cara Membuat Layout Website Dengan Flexbox CSS, tentu sudah tidak asing lagi bukan dengan flexbox pada css. Yang dapat kita gunakan untuk membuat website responsive hanya dengan html dan css.

Nah pada latihan Cara Membuat Layout Website Dengan Flexbox CSS kali ini kita akan membuat class – class nya terlebih dahulu kemudian tinggal kita panggil class nya untuk membentuk sebuah layout website. Konsepnya sama dengan framework css seperti bootstrap namun dalam latihan kali ini memang sederhana saja kita buat, supaya kita tahu ternyata membuat website responsive itu bisa kita lakukan dengan menggunakan flex css, flex yang berarti flexible dengan menentukan ukuran di setiap device.

Baik langsung saja kita buat file html dengan nama index.html kemudian buat struktur dasarnya seprti gambar di bawah ini

Kemudian kita buat class – class nya di dalam css nya, teman – teman bisa ketikkan seperti script di bawah ini

*{padding: 0; margin: 0;}
.container{width: 100%; max-width: 1300px; margin: 0 auto}
.row{display: flex; flex-wrap: wrap;}
.col{flex: 1 1 200px; margin: 5px; padding: 7px}

Kemudian kita tinggal buat berapa kolom yang akan kita buat, kita akan mencoba membuat 1 sampai 5 kolom dengan membuat struktur seperti script di bawah ini

<div class="container">
	<div class="row">
		<div class="col" style="background-color: red">Satu Kolom (1/1)</div>
	</div>
	<div class="row">
		<div class="col" style="background-color: tomato">Kolom satu dari Dua Kolom (1/2)</div>
		<div class="col" style="background-color: tomato">Kolom dua dari Dua Kolom (2/2)</div>
	</div>
	<div class="row">
		<div class="col" style="background-color: orange">Kolom satu dari Tiga Kolom (1/3)</div>
		<div class="col" style="background-color: orange">Kolom dua dari Tiga Kolom (2/3)</div>
		<div class="col" style="background-color: orange">Kolom tiga dari Tiga Kolom (3/3)</div>
	</div>
	<div class="row">
		<div class="col" style="background-color: lightblue">Kolom satu dari Satu Kolom (1/4)</div>
		<div class="col" style="background-color: lightblue">Kolom dua dari Satu Kolom (2/4)</div>
		<div class="col" style="background-color: lightblue">Kolom tiga dari Satu Kolom (3/4)</div>
		<div class="col" style="background-color: lightblue">Kolom empat dari Satu Kolom (4/4)</div>
	</div>
	<div class="row">
		<div class="col" style="background-color: gray">Kolom satu dari Satu Kolom (1/5)</div>
		<div class="col" style="background-color: gray">Kolom dua dari Satu Kolom (2/5)</div>
		<div class="col" style="background-color: gray">Kolom tiga dari Satu Kolom (3/5)</div>
		<div class="col" style="background-color: gray">Kolom empat dari Satu Kolom (4/5)</div>
		<div class="col" style="background-color: gray">Kolom limat dari Satu Kolom (5/5)</div>
	</div>
</div>

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Jika kita buka pada device terkecilpun akan responsive

Nah itulah Cara Membuat Layout Website Dengan Flexbox CSS yang menjadikan layout website kita menjadi responsive. Baik sekian dari saya dan tentu kita akan berjumpa kembali pada artikel yang akan datang, terimakasih dan sampai jumpa.