Tekhnik membuat kolom cepat menggunakan FLEX

Membuat sebuah website pasti tidak jauh dengan desain perbagian bagin yah atau bisa disebut dengan kolom pada website sehingga menarik untuk dilihat oleh pengunjung website, kolom bisa bervariasi tergantung dari kebutuhan si pembuat website tersebut tidak ada website zaman sekarang hanya memiliki sebuah kolom pada tampilannya,

pasti sangat membosankan bukan?, pasti yah, tapi perlu teman teman ketahui kebanyakan kolom pada website juga tidak bagus untuk segi tampilan, karena terlihat sangat padat pada website sehingga terlihat membosankan, ada baiknya disesuaikan mau berapa kolom yang digunakan, oke ngomong-ngomong soal kolom pada tampilan website saya ad acara cepat loh untuk membuat beberapa kolom dengan singkat, biasanya kita menggunakan float: left; atau float:right; kali ini kita tida akan menggunakan itu yah eheheh â€¦ baiklah daripada semakin pesaran, teman teman bisa buatkan file baru dengan nama file flex.html lalu tambahkan script dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Membuat kolom HTML dengan FLEX BOX</title>
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
	<div class="pembungkus">
		<div class="konten"> KOLOM PERTAMA </div>
		<div class="konten"> KOLOM KE DUA </div>
		<div class="konten"> KOLOM KETIGA </div>
	</div>		
</body>
</html>

Dan buatkan file stylenya dengan nama style.css lalu tambahkan script berikut :

* {

	padding: 0;
	margin: 0;
}

body { background: grey }

.pembungkus { display: flex; flex-wrap: nowrap; justify-content: space-around;}
.konten { width: 200px; height: 200px; background: lightgreen; border: 2px solid black; }

Oke jika sudah disave dan jalankan, jika berhasil maka tampilannya akan seperti ini :

Cukup mudah dan simple bukan?, sekian tutorial tentang Tekhnik membuat kolom cepat menggunakan FLEX. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA

Tekhnik membuat kolom cepat menggunakan FLEX

Kategori