CSS Flexbox: A Practical Cheatsheet

Flexbox solves 90% of layout problems. These are the properties I actually use daily.

Center Anything

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar Layout

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

Card Row with Gap

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card { flex: 1 1 300px; }

Key Properties

• justify-content - horizontal alignment (main axis)
• align-items - vertical alignment (cross axis)
• flex-wrap - allow items to wrap
• gap - space between items