Mastering Flexbox in CSS

Flexbox (Flexible Box Layout) is a CSS layout model that lets you build responsive, flexible structures without using floats or positioning. It’s a powerful tool for aligning items and distributing space between them within a container.

Basic Concepts

Flexbox works with two types of elements:

• The flex container (parent)
• The flex items (children)

Creating a Flex Container

To create a flex container, use the display property with the value flex or inline-flex:

.container {
  display: flex; /* or inline-flex */
}

Flex Container Properties

Item Direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (default): left to right
• row-reverse: right to left
• column: top to bottom
• column-reverse: bottom to top

Wrapping

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (default): all items on a single line
• wrap: items wrap onto the next line if needed
• wrap-reverse: items wrap onto the previous line if needed

The flex-flow Shorthand

.container {
  flex-flow: row nowrap; /* flex-direction and flex-wrap combined */
}

Horizontal Alignment (justify-content)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (default): items aligned at the start
• flex-end: items aligned at the end
• center: items centered
• space-between: equal space between items
• space-around: equal space around items
• space-evenly: equal space between and around items

Vertical Alignment (align-items)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch (default): stretches items to fill the container
• flex-start: items aligned at the top
• flex-end: items aligned at the bottom
• center: items vertically centered
• baseline: items aligned on their baseline

Line Alignment (align-content)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

This property only has an effect when there are multiple lines of items.

Flex Item Properties

Order

.item {
  order: 0; /* default */
}

The higher the value, the later the item appears in the order.

Flexibility (flex-grow, flex-shrink, flex-basis)

.item {
  flex-grow: 0; /* default */
  flex-shrink: 1; /* default */
  flex-basis: auto; /* default */
}

• flex-grow: an item’s ability to grow
• flex-shrink: an item’s ability to shrink
• flex-basis: an item’s default size

The flex Shorthand

.item {
  flex: 0 1 auto; /* flex-grow, flex-shrink, and flex-basis combined */
}

Individual Alignment

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

This property lets you override the alignment set by align-items for a specific item.

Practical Example

Here is an example of a layout built with Flexbox:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

Common Use Cases

1. Perfect centering (horizontal and vertical):

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Responsive navigation:

nav {
  display: flex;
  flex-wrap: wrap;
}

nav a {
  flex: 1 1 100px;
}

3. Flexible grid:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 1 300px;
  margin: 10px;
}

Conclusion

Flexbox is a powerful tool for creating flexible, responsive layouts. It greatly simplifies many layout challenges that were difficult to solve with traditional methods such as floats and positioning.

To deepen your knowledge of Flexbox, I recommend exploring the complete guide on MDN and practicing with interactive tools like Flexbox Froggy.