Codexpal - Learn Programming Interactively

Lesson Content

Flexbox Layout

Flexbox is a one-dimensional layout method that makes it easy to align and distribute space among items in a container. It's perfect for navigation bars, card layouts, and centering content.

Basic Flexbox

.container {
  display: flex;
  justify-content: center; /* horizontal alignment */
  align-items: center;     /* vertical alignment */
  gap: 20px;              /* space between items */
}

Key Properties

display: flex: Makes container a flexbox
flex-direction: row (default), column, row-reverse, column-reverse
justify-content: flex-start, center, flex-end, space-between, space-around
align-items: flex-start, center, flex-end, stretch
flex-wrap: nowrap, wrap - allows items to wrap to new line
gap: Space between flex items

Item Properties

flex-grow: How much item should grow
flex-shrink: How much item should shrink
flex-basis: Initial size before growing/shrinking

Example Code

Build a horizontal navigation bar using flexbox

<!DOCTYPE html>
<html><head><style>
.nav {
  display: flex;
  gap: 15px;
  justify-content: center;
  background: #f3f4f6;
  padding: 15px;
}
.nav a {
  padding: 10px 20px;
  background: #3b82f6;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
.nav a:hover {
  background: #2563eb;
}
</style></head><body>
<nav class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
</body></html>

Expected Output:

Home

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code