? CSS Flexbox

⚡ Quick Overview

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout system that arranges elements in rows or columns. It is ideal for aligning items dynamically and creating responsive designs with minimal code.

? Key Concepts

Flex Container: The parent element that has display: flex.
Flex Items: Direct children of the flex container.
Main Axis: The primary axis (row or column) along which items are placed.
Cross Axis: The axis perpendicular to the main axis.
One-Dimensional: Flexbox controls layout in one direction at a time (row or column).

? Flex Container Basics

To start using Flexbox, turn a parent element into a flex container using display: flex. All of its direct children automatically become flex items.

? View Code Example (Basic Flex Container)

/* Create a horizontal flex container */
.flex-container {
  display: flex;
  gap: 12px;
}

.flex-item {
  padding: 12px;
  background: #e5e7eb;
  border-radius: 6px;
}

? Output / Explanation

The items inside .flex-container are placed next to each other in a row. The gap property adds space between items, and each .flex-item gets a light background and padding for better visibility.

? Flex Container Properties

Parent-Level Controls

Important properties that are applied to the flex container:

flex-direction – row | row-reverse | column | column-reverse
flex-wrap – nowrap | wrap | wrap-reverse
justify-content – horizontal alignment along the main axis
align-items – vertical alignment along the cross axis (single line)
align-content – alignment for multi-line content (when wrapping)

? View Code Example (Direction & Alignment)

/* Flex container with centered content */
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 200px;
}

? Output / Explanation

All flex items are laid out in a row, horizontally centered with justify-content: center and vertically centered within the 200px height using align-items: center.

? Flex Items & Their Properties

Flex items are the children of the flex container. You can control their growth, shrink behavior, initial size, order, and individual alignment.

order – controls the visual order of items (default: 0).
flex-grow – how much an item grows relative to others.
flex-shrink – how much an item shrinks when space is tight.
flex-basis – initial size before growing/shrinking.
flex – shorthand: flex-grow flex-shrink flex-basis.
align-self – override align-items for a single item.

? View Code Example (Item Growth & Order)

/* Flex items sharing and prioritizing space */
.flex-container {
  display: flex;
}

.flex-item:nth-child(1) {
  flex: 1;
}

.flex-item:nth-child(2) {
  flex: 2;
}

.flex-item:nth-child(3) {
  flex: 1;
  order: -1;
}

? Output / Explanation

The second item gets twice as much remaining space as items 1 and 3 because of flex: 2. The third item appears before the others because its order is -1, which is lower than the default 0.

? Responsive Flex Layout

Combine Flexbox with media queries to build layouts that adapt to different screen sizes. Use flex-wrap to allow items to wrap onto multiple lines.

? View Code Example (Responsive Flexbox)

/* Responsive flex layout that stacks on small screens */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.flex-item {
  flex: 1 1 200px;
}

@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}

? Output / Explanation

On larger screens, items share space in a row and wrap when necessary. On screens smaller than 600px, flex-direction: column stacks items vertically, creating a mobile-friendly layout.

? Example: Simple Flexbox Row

Here is a minimal HTML structure using the .flex-container and .flex-item classes from the examples above.

? View Code Example (HTML Structure)

<!-- HTML structure using Flexbox -->
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

? Output / Explanation

The three boxes appear in a row, sharing available space. Depending on the CSS applied, they can be evenly spaced, centered, or stretched to fill the container.

? Tips & Best Practices

Use flex: 1 on multiple items to allow them to share space equally.
Use margin: auto on a flex item to push it away and create spacing or centering effects.
Use align-self to override vertical alignment for specific items.
Prefer flex properties over fixed width for truly responsive layouts.
Keep Flexbox for one-dimensional layouts and use CSS Grid when you need full two-dimensional control.

? Try It Yourself / Practice Tasks

Create a horizontal navigation bar using Flexbox where all links have equal width.
Build a two-column layout that becomes a single column when the screen width is below 768px.
Align one flex item to the far right while keeping the others on the left using margin-left: auto.
Use order to change the visual order of items without changing the HTML structure.
Experiment with different flex-grow and flex-shrink values to see how items behave when space is tight or abundant.