css - CSS Flexbox

CSS Flexbox (Flexible Box Layout) is a powerful layout module in CSS3 that makes it easier to design responsive, flexible, and dynamic layouts without using floats or positioning hacks. It provides an efficient way to align, distribute, and space items inside a container, even when their sizes are unknown or dynamic.

---

1. What is Flexbox?

Flexbox is a one-dimensional layout system in CSS, meaning it deals with either rows or columns at a time. It allows you to:

• Align items horizontally or vertically

• Distribute extra space between items

• Control the size of items relative to the container or each other

• Build responsive layouts easily

---

2. Enabling Flexbox

To use Flexbox, you need to set the container to display: flex or display: inline-flex.

.container {
  display: flex;       /* block-level flex container */
  /* display: inline-flex;  Inline-level flex container */
}

---

3. Flex Container vs Flex Items

• Flex Container → The parent element where display: flex is applied.

• Flex Items → The direct children of the flex container.

Example HTML:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Example CSS:

.container {
  display: flex;
  background-color: #f3f3f3;
  padding: 10px;
}

.box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  margin: 5px;
}

---

4. Main Axis vs Cross Axis

Understanding axes is key in Flexbox:

• Main Axis → The direction in which flex items are placed (row or column)

• Cross Axis → Perpendicular to the main axis

Default main axis = row (horizontal).

---

5. Important Flexbox Properties

A. Container Properties

These are applied to the flex container:

1. flex-direction

Defines the direction of items.

.container {
  flex-direction: row;       /* Default: left to right */
  flex-direction: row-reverse; /* Right to left */
  flex-direction: column;      /* Top to bottom */
  flex-direction: column-reverse; /* Bottom to top */
}

2. justify-content (Main Axis Alignment)

Aligns items horizontally (when flex-direction: row).

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

3. align-items (Cross Axis Alignment)

Aligns items vertically (when flex-direction: row).

.container {
  align-items: stretch;    /* Default, fills height */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;   /* Align text baselines */
}

4. flex-wrap

Controls whether items should wrap into multiple lines.

.container {
  flex-wrap: nowrap;    /* Default, no wrapping */
  flex-wrap: wrap;      /* Items wrap to next line */
  flex-wrap: wrap-reverse; /* Wraps in reverse order */
}

5. align-content

Aligns multiple lines along the cross axis (works only when wrapping).

.container {
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch; /* Default */
}

---

B. Flex Item Properties

These are applied to flex items:

1. order

Changes the order of items.

.box1 { order: 2; }
.box2 { order: 1; }
.box3 { order: 3; }

2. flex-grow

Controls how much space an item takes up compared to others.

.box1 { flex-grow: 1; } /* Expands more */
.box2 { flex-grow: 2; } /* Expands twice as much */

3. flex-shrink

Controls how items shrink when space is limited.

.box1 { flex-shrink: 1; } /* Default */
.box2 { flex-shrink: 0; } /* Won't shrink */

4. flex-basis

Defines the initial size of an item before space distribution.

.box { flex-basis: 200px; }

5. flex (Shorthand)

A shorthand for flex-grow, flex-shrink, and flex-basis.

.box { flex: 1 1 200px; } /* grow, shrink, basis */

6. align-self

Overrides align-items for individual items.

.box1 { align-self: center; }
.box2 { align-self: flex-start; }

---

6. Simple Flexbox Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 200px;
      background-color: #eee;
    }
    .box {
      width: 80px;
      height: 80px;
      background-color: #4caf50;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

---

7. Advantages of Flexbox

• Easy horizontal & vertical alignment

• Handles dynamic resizing smoothly

• Reduces need for floats and positioning

• Great for responsive design

---