CSS Flexbox Layout Fundamentals - Complete Guide for Modern Web Development

Introduction: CSS Flexbox (Flexible Box) is a layout model that allows elements to align and distribute space within a container, even when their size is unknown or dynamic.

1. Basic Flexbox Container

To create a flex container, set the display property to 'flex' or 'inline-flex':

Item 1
Item 2
Item 3
.flex-container {
  display: flex;
}

2. Flex Container Properties

These properties are applied to the flex container:

Property Description Values
flex-direction Defines the direction of flex items row | row-reverse | column | column-reverse
justify-content Aligns items along the main axis flex-start | flex-end | center | space-between | space-around | space-evenly
align-items Aligns items along the cross axis stretch | flex-start | flex-end | center | baseline
flex-wrap Defines whether items wrap or stay in a single line nowrap | wrap | wrap-reverse
align-content Aligns flex lines when there's extra space flex-start | flex-end | center | space-between | space-around | stretch

3. Flex Direction Examples

Row Direction (default)

Item 1
Item 2
Item 3

Column Direction

Item 1
Item 2
Item 3
/* Row direction (default) */
.container {
  flex-direction: row;
}

/* Column direction */
.container {
  flex-direction: column;
}

4. Justify Content Examples

Justify Content: Center

Item 1
Item 2
Item 3

Justify Content: Space Between

Item 1
Item 2
Item 3
.container {
  justify-content: center; /* or space-between, flex-start, etc. */
}

5. Flex Item Properties

These properties are applied to flex items:

Property Description Values
flex-grow Defines how much an item grows relative to others number (0 by default)
flex-shrink Defines how much an item shrinks relative to others number (1 by default)
flex-basis Defines the initial size of an item length, percentage, or 'auto' (auto by default)
flex Shorthand for flex-grow, flex-shrink, and flex-basis flex-grow flex-shrink flex-basis
align-self Allows individual items to override align-items auto | flex-start | flex-end | center | baseline | stretch

6. Flex Grow Example

The second item has flex-grow: 2, making it twice as wide as the others:

Item 1
Item 2
Item 3
.item2 {
  flex-grow: 2;
}

7. Practical Example: Navigation Bar

A common use case for flexbox is creating responsive navigation bars:

Logo
Home
About
Contact
.nav-container {
  display: flex;
  justify-content: space-between;
  background-color: #2c3e50;
  color: white;
}

.nav-item {
  flex-grow: 1;
  text-align: center;
}

8. Flexbox vs Grid

When to use Flexbox vs CSS Grid:

Browser Support Note: Flexbox is supported in all modern browsers. For older browsers (IE9 and below), you may need to use fallbacks or polyfills.

9. Best Practices

  1. Use flexbox for one-dimensional layouts
  2. Combine flexbox with other CSS properties for complex layouts
  3. Test your layouts across different screen sizes
  4. Use flex shorthand property when possible: flex: 1 instead of separate properties
  5. Remember that flexbox changes the visual order but not the source order
Home