Building Responsive Websites with CSS Flexbox

Flexbox makes creating responsive layouts easy. Master this essential CSS skill.

What is Flexbox?

A CSS layout model for arranging items in rows or columns.

Basic Flexbox Setup

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

Main Axis Properties

justify-content

• flex-start: Items at start
• flex-end: Items at end
• center: Items centered
• space-between: Equal space between
• space-around: Equal space around

Cross Axis Properties

align-items

• stretch: Stretch to fill
• flex-start: Top
• flex-end: Bottom
• center: Middle

Flex Item Properties

css
.item {
  flex-grow: 1;    /* Grow factor */
  flex-shrink: 0;  /* Shrink factor */
  flex-basis: 200px; /* Initial size */
}

Practical Example

html
<div class="navbar">
  <div class="logo">Logo</div>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</div>

css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

Responsive Design

css
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px; /* Grow, shrink, min-width */
}

Tips

1. Use flex-wrap for responsive grids
2. Combine with CSS Grid for complex layouts
3. Use gap for consistent spacing
4. Test on different screen sizes