Flexbox adalah model tata letak satu dimensi yang memudahkan perataan, pembagian ruang, dan pengaturan urutan elemen antarmuka.
Flexbox Intro
Contoh Kode Flexbox Intro:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #0d2e5c;
padding: 10px;
gap: 10px;
border-radius: 8px;
}
.flex-item {
background-color: #fca311;
color: #0d2e5c;
font-weight: bold;
padding: 20px;
text-align: center;
flex: 1;
border-radius: 6px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS Flexbox Intro mengubah tampilan elemen di atas.