Understanding Flexbox: CSS Tutorial

4/13/2025

#Understing Flexbox: CSS Turial

Go Back

Understanding Flexbox: CSS Tutorial

Flexbox, short for the CSS Flexible Box Layout, is a powerful layout module that allows you to design responsive and efficient layouts with ease. It was introduced to solve common layout challenges that developers faced with float-based or inline-block layouts.

#Understing Flexbox: CSS Turial

Why Use Flexbox?

Flexbox provides a more predictable and efficient way to align and distribute space among items in a container—even when their size is unknown or dynamic. It's ideal for building 1-dimensional layouts, either as rows or columns.

Key Terminology

  • Flex container: The parent element with display: flex or display: inline-flex.

  • Flex items: The direct children of the flex container.

Basic Syntax

.container {
  display: flex;
}

Main Axis vs. Cross Axis

  • Main Axis: The primary axis along which flex items are placed (horizontal by default).

  • Cross Axis: Perpendicular to the main axis (vertical by default).

Important Flexbox Properties

On the Flex Container:

  • flex-direction: Defines the direction of the main axis (row, row-reverse, column, column-reverse).

  • justify-content: Aligns items along the main axis (flex-start, center, space-between, etc.).

  • align-items: Aligns items along the cross axis (flex-start, center, stretch, etc.).

  • flex-wrap: Determines whether items should wrap onto multiple lines (nowrap, wrap, wrap-reverse).

  • align-content: Controls space between rows in a wrapped layout.

On the Flex Items:

  • flex-grow: How much the item will grow relative to others.

  • flex-shrink: How much the item will shrink relative to others.

  • flex-basis: The initial main size of the item.

  • align-self: Overrides align-items for individual items.

Example

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

.item {
  flex: 1;
  padding: 20px;
  background-color: lightblue;
}

Common Use Cases

  • Centering elements both vertically and horizontally.

  • Creating responsive navigation bars.

  • Building equal-height columns.

  • Designing card layouts that adjust automatically.

Conclusion

Flexbox is a must-know tool for modern web design. It simplifies the process of creating responsive and adaptable layouts without the complexity of older CSS methods. Once you understand the main axis, cross axis, and how the various properties work, you'll be able to tackle most layout challenges with ease.

Table of content