Skip to content
beginnerPhase 31 · CSS

Flexbox

Build one-dimensional layouts with flex containers, items, and alignment properties.

1h
0 problems
Topic Progress0%

Flex Container

Flex Container

The parent element becomes a flex container:

.container {
  display: flex;
}

flex-direction

.container {
  flex-direction: row;            /* Default: horizontal */
  flex-direction: row-reverse;    /* Horizontal, reversed */
  flex-direction: column;         /* Vertical */
  flex-direction: column-reverse; /* Vertical, reversed */
}

flex-wrap

.container {
  flex-wrap: nowrap;    /* Default: single line */
  flex-wrap: wrap;      /* Items wrap to next line */
  flex-wrap: wrap-reverse; /* Wrapped, reversed */
}

flex-flow

Shorthand for direction + wrap:

.container {
  flex-flow: row wrap;
}

justify-content

Horizontal alignment (main axis):

.container {
  justify-content: flex-start;    /* Default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between; /* Equal space between */
  justify-content: space-around;  /* Equal space around */
  justify-content: space-evenly;  /* Equal space everywhere */
}

align-items

Vertical alignment (cross axis):

.container {
  align-items: stretch;    /* Default */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;   /* Text baseline */
}

align-content

Spacing between wrapped lines:

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

Flex Items

Flex Items

flex-grow

How much item should grow relative to siblings:

.item1 { flex-grow: 1; } /* Takes 1 part */
.item2 { flex-grow: 2; } /* Takes 2 parts */

flex-shrink

How much item should shrink if needed:

.item {
  flex-shrink: 0; /* Don't shrink */
  flex-shrink: 1; /* Default: shrink if needed */
}

flex-basis

Initial size before grow/shrink:

.item {
  flex-basis: auto;    /* Default: based on content */
  flex-basis: 200px;   /* Fixed initial size */
  flex-basis: 50%;     /* Percentage */
}

flex Shorthand

.item {
  flex: 1;           /* grow: 1, shrink: 1, basis: 0% */
  flex: 0 0 200px;   /* No grow, no shrink, basis: 200px */
  flex: 1 1 auto;    /* grow: 1, shrink: 1, basis: auto */
}

align-self

Override align-items for individual item:

.item {
  align-self: center;
  align-self: flex-end;
  align-self: stretch;
}

order

Control visual order:

.item1 { order: 2; }  /* Appears second */
.item2 { order: 1; }  /* Appears first */
.item3 { order: 3; }  /* Appears third */

margin: auto

.item {
  margin-left: auto; /* Push to right */
  margin: auto;      /* Center both axes */
}

Alignment

Alignment

Centering Patterns

Perfect Center

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

Horizontal Center

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

Vertical Center

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

Spread Across

.container {
  display: flex;
  justify-content: space-between;
}

Alignment Properties Summary

Property Axis Values
justify-content Main flex-start, flex-end, center, space-between, space-around, space-evenly
align-items Cross stretch, flex-start, flex-end, center, baseline
align-self Cross (item) Same as align-items
align-content Cross (multi-line) flex-start, flex-end, center, space-between, space-around

Common Flex Patterns

Common Flex Patterns

Holy Grail Layout

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar-left {
  flex: 0 0 200px;
}

.content {
  flex: 1;
}

.sidebar-right {
  flex: 0 0 200px;
}

Navbar

.navbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

Card Grid

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;
}

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  /* No special styles needed */
}

Centered Form

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

.form {
  width: 100%;
  max-width: 400px;
}

Equal Width Columns

.columns {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1;
}

Media Object

.media {
  display: flex;
  gap: 20px;
}

.media-image {
  flex-shrink: 0;
}

.media-body {
  flex: 1;
}

Practice Problems

0/3solved
Build Flexbox Component

Create a reusable React component implementing Flexbox. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Flexbox Testing

Write unit and integration tests for Flexbox using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Flexbox Performance

Optimize Flexbox for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is the default flex-direction?

Question 1 options

2. What does justify-content control?

Question 2 options

3. What does flex: 1 mean?

Question 3 options

4. How do you vertically center items in a flex container?

Question 4 options

5. Which property creates equal spacing between items with no space at the edges?

Question 5 options

Flashcards

Question

What are the two axes in Flexbox?

Click to reveal answer

Answer

Main axis (default horizontal) and cross axis (default vertical). justify-content controls main, align-items controls cross.

Question

What does flex-wrap: wrap do?

Click to reveal answer

Answer

Allows flex items to wrap to the next line when they run out of space, instead of shrinking.

Question

How do you center an element perfectly with Flexbox?

Click to reveal answer

Answer

Display: flex; justify-content: center; align-items: center;

Question

What is the difference between justify-content and align-items?

Click to reveal answer

Answer

justify-content aligns along main axis. align-items aligns along cross axis.

Question

What does flex: 1 do?

Click to reveal answer

Answer

Sets flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Makes item grow equally with siblings.

Revision Notes

Key Takeaways

  • 1.Flexbox is one-dimensional (row or column)
  • 2.justify-content controls main axis alignment
  • 3.align-items controls cross axis alignment
  • 4.flex shorthand combines grow, shrink, and basis
  • 5.Flexbox is great for component-level layouts

Interview Tips

  • •Know the difference between flex-direction values
  • •Be able to center elements both horizontally and vertically
  • •Understand flex shorthand and individual properties
  • •Explain when to use Flexbox vs CSS Grid

Cheat Sheet

Flexbox Cheat Sheet

Container Properties

  • display: flex
  • flex-direction: row | column | row-reverse | column-reverse
  • flex-wrap: nowrap | wrap | wrap-reverse
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  • align-items: stretch | flex-start | flex-end | center | baseline
  • gap: 20px

Item Properties

  • flex: grow shrink basis
  • align-self: auto | flex-start | flex-end | center | stretch
  • order: 0 (default)
  • margin: auto (pushes items)

Common Patterns

/* Perfect center */
display: flex; justify-content: center; align-items: center;

/* Space between */
display: flex; justify-content: space-between;

/* Equal columns */
.item { flex: 1; }

/* Sticky footer */
body { display: flex; flex-direction: column; min-height: 100vh; }
.content { flex: 1; }