Introduction to CSS Flexbox

• CSS Flexbox is a layout module designed to simplify the process of aligning and distributing space among items in a container. It provides a more efficient way to design complex layouts with minimal code. Flexbox is particularly useful for building responsive web designs.

Basic Concepts of Flexbox

Flex Container and Flex Items

• Flex Container: The parent element that holds flex items.🧳

• Flex Items: The child elements inside a flex container.📦

• Example:

<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>

• Explanation: The div with the class flex-container is the flex container, and the divs inside it are the flex items.

Setting Up Flexbox

CSS Properties:

.flex-container {
  display: flex;
}

• Explanation: Applying display: flex; to a container makes it a flex container, enabling the use of all Flexbox properties.

Flexbox Properties

flex-direction

• Description: Defines the direction of the flex items.🔄

Values:

• row (default): Items are placed in a row.

• row-reverse: Items are placed in a row in reverse order.

• column: Items are placed in a column.

• column-reverse: Items are placed in a column in reverse order.

• Example:

.flex-container {
  flex-direction: row;
}

• Explanation: Items are laid out in a horizontal row.

justify-content

• Description: Aligns flex items along the main axis (horizontally by default).🧭

Values:

• flex-start: Items align to the start of the container.

• flex-end: Items align to the end of the container.

• center: Items are centered along the main axis.

• space-between: Items are evenly distributed with space between them.

• space-around: Items are evenly distributed with space around them

.flex-container {
  justify-content: space-between;
}

• Explanation: Items are distributed with equal space between them.

align-items

• Description: Aligns flex items along the cross axis (vertically by default).⬆️

Values:

• flex-start: Items align to the top of the container.

• flex-end: Items align to the bottom of the container.

• center: Items are centered along the cross axis.

• baseline: Items align along their baselines.

• stretch: Items stretch to fill the container.

.flex-container {
  align-items: center;
}

• Explanation: Items are centered vertically within the container.

flex-wrap

• Description: Controls whether the flex items should wrap onto multiple lines.🌀

Values:

• nowrap (default): All items are kept on a single line.

• wrap: Items wrap onto multiple lines from top to bottom.

• wrap-reverse: Items wrap onto multiple lines from bottom to top.

• Example:

.flex-container {
  flex-wrap: wrap;
}

• Explanation: Items will wrap to the next line if they exceed the container’s width.

align-content

• Description: Aligns flex lines when there is extra space in the cross axis.📏

Values:

• flex-start: Lines are packed to the start.

• flex-end: Lines are packed to the end.

• center: Lines are packed to the center.

• space-between: Lines are evenly distributed with space between them.

• space-around: Lines are evenly distributed with space around them.

• stretch: Lines stretch to take up the remaining space.

• Example:

.flex-container {
  align-content: space-around;
}

• Explanation: Flex lines are evenly distributed with space around them.

Flex Item Properties

Order

• Description: Specifies the order of the flex items. 🔢

• Example:

.flex-item {
  order: 2;
}

• Explanation: The item will be displayed second in the order, regardless of its position in the HTML.

flex-grow

• Description: Defines how much a flex item should grow relative to the rest. 🌱

• Example:

.flex-item {
  flex-grow: 2;
}

• Explanation: The item will grow twice as much as other items if there is extra space.

flex-shrink

• Description: Defines how much a flex item should shrink relative to the rest.📉

• Example:

.flex-item {
  flex-shrink: 1;
}

• Explanation: The item will shrink if necessary to fit within the container.

flex-basis

• Description: Specifies the initial size of the flex item before any growing or shrinking.📐

• Example:

.flex-item {
  flex-basis: 100px;
}

• Explanation: The item will have a base size of 100px.

align-self

• Description: Overrides the align-items value for a specific flex item.

• Example

.flex-item {
  align-self: flex-end;
}

• Explanation: The item will align to the end of the container, regardless of the align-items setting.