Flexbox (Flexible Box) Layout is a powerful layout system in CSS designed to provide an efficient and predictable way to arrange and distribute space among elements in a container, even when their sizes are unknown or dynamic. Flexbox is particularly well-suited for creating one-dimensional layouts, where elements are aligned in either a row or a column. It's commonly used for building responsive designs, aligning items within a navigation bar, creating equal-height columns, and more.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Flexbox Layout Example</title>
</head>
<body>
<h1>Welcome to JTC</h1>
<p>Flexbox Layout Example</p>
<nav class="nav-bar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav-bar {
display: flex;
background-color: #333;
padding: 10px;
}
.nav-bar a {
color: white;
text-decoration: none;
margin-right: 20px;
}
In this example:
• We have a .nav-bar element set to display: flex; to create a flex container.
• The flex-direction property is set to its default value, row, which arranges the child elements horizontally in a row.
• The background color and padding are applied to the .nav-bar.
• The .nav-bar a selector styles the links within the navigation bar.
Flexbox automatically arranges the links horizontally and distributes the available space between them evenly. The margin-right adds spacing between the links.