Properti justify-content: space-between; dan align-items: center; adalah kombinasi paling populer untuk membuat bilah navigasi modern.
Flex Container
Contoh Kode Flex Container:
<!DOCTYPE html>
<html>
<head>
<style>
.nav-flex {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
border: 1px solid #e2e8f0;
padding: 12px 20px;
border-radius: 8px;
font-family: sans-serif;
}
.nav-menu { display: flex; gap: 15px; }
.nav-menu a { text-decoration: none; color: #0d2e5c; font-weight: 600; }
</style>
</head>
<body>
<div class="nav-flex">
<strong style="color: #0d2e5c;">Skillance</strong>
<div class="nav-menu">
<a href="#">Beranda</a>
<a href="#">Materi</a>
<a href="#">Bursa</a>
</div>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS Flex Container mengubah tampilan elemen di atas.