Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Basics of Flexbox

Flexbox (Flexible Box Layout) is a modern CSS layout system used to align and distribute elements efficiently.

It helps create responsive layouts with less code.

Why Flexbox is Important?

  • Easy horizontal alignment
  • Easy vertical alignment
  • Responsive layouts
  • Equal spacing between items
  • Flexible content arrangement
  • Cleaner layout code

How Flexbox Works?

Flexbox works using:

  • Flex Container → Parent element
  • Flex Items → Child elements

Basic Flexbox Example

[code theme="dark"]
1
2
3
[/code] [code theme="dark"] .container{ display:flex; } .box{ width:100px; height:100px; background:#ddd; } [/code]

display:flex activates Flexbox.

Flex Direction

Controls the direction of flex items.

Row (Default)

[code theme="dark"] .container{ display:flex; flex-direction:row; } [/code]

Items appear horizontally.

Column

[code theme="dark"] .container{ display:flex; flex-direction:column; } [/code]

Items appear vertically.

justify-content

Controls horizontal alignment.

Center

[code theme="dark"] .container{ display:flex; justify-content:center; } [/code]

space-between

[code theme="dark"] justify-content:space-between; [/code]

First item left, last item right, equal spacing between.

space-around

[code theme="dark"] justify-content:space-around; [/code]

Adds space around every item.

space-evenly

[code theme="dark"] justify-content:space-evenly; [/code]

Equal spacing everywhere.

align-items

Controls vertical alignment.

Center Items

[code theme="dark"] .container{ display:flex; align-items:center; } [/code]

Other Values

[code theme="dark"] align-items:flex-start; align-items:flex-end; align-items:stretch; [/code]

Perfect Center Example

Most commonly asked Flexbox interview question.

[code theme="dark"] .container{ display:flex; justify-content:center; align-items:center; height:100vh; } [/code]

This perfectly centers content horizontally and vertically.

gap Property

Adds spacing between flex items.

[code theme="dark"] .container{ display:flex; gap:20px; } [/code]

Modern alternative to margin spacing.

flex-wrap

Controls whether items move to the next line.

No Wrap (Default)

[code theme="dark"] flex-wrap:nowrap; [/code]

Wrap

[code theme="dark"] flex-wrap:wrap; [/code]

Items automatically move to next line when space is not available.

Responsive Card Layout Example

[code theme="dark"] .container{ display:flex; gap:20px; flex-wrap:wrap; } .card{ width:300px; } [/code]

flex-grow

Controls how much an item grows.

[code theme="dark"] .box{ flex-grow:1; } [/code]

Item takes available extra space.

flex-shrink

Controls shrinking behavior.

[code theme="dark"] .box{ flex-shrink:0; } [/code]

flex-basis

Defines initial size before remaining space distribution.

[code theme="dark"] .box{ flex-basis:200px; } [/code]

Shortcut: flex

[code theme="dark"] .box{ flex:1; } [/code]

Equal width for all items.

Flexbox Navigation Example

[code theme="dark"]
Logo
  • Home
  • About
  • Contact
[/code] [code theme="dark"] .navbar{ display:flex; justify-content:space-between; align-items:center; } [/code]

Flexbox Common Use Cases

  • Navbar
  • Cards layout
  • Center alignment
  • Buttons alignment
  • Sidebar layout
  • Responsive sections
  • Pricing cards

Flexbox vs Traditional Layout

Old Method Flexbox
Float based Modern layout system
Complex alignment Easy alignment
More CSS code Cleaner code
Difficult responsive layouts Responsive friendly

Tailwind Flexbox Classes

Enable Flex

[code theme="dark"] flex [/code]

Direction

[code theme="dark"] flex-row flex-col [/code]

Horizontal Alignment

[code theme="dark"] justify-center justify-between justify-around [/code]

Vertical Alignment

[code theme="dark"] items-center items-start items-end [/code]

Gap

[code theme="dark"] gap-4 gap-6 [/code]

Tailwind Example

[code theme="dark"]
Logo
Menu
[/code]

Responsive Flexbox Example

[code theme="dark"]
[/code]

Meaning

  • Mobile → Column layout
  • Desktop → Row layout

Best Practices

  • Use gap instead of margins for spacing
  • Use flex-wrap for responsive layouts
  • Use justify-content carefully
  • Combine Flexbox with media queries
  • Use Grid for complex 2D layouts

Quick Summary

  • display:flex → Activates Flexbox
  • flex-direction → Row or column
  • justify-content → Horizontal alignment
  • align-items → Vertical alignment
  • gap → Space between items
  • flex-wrap → Responsive wrapping

Flexbox is one of the most important CSS concepts for modern frontend development.