What is Flexbox in CSS ?

Flexbox (Flexible Box Layout) in CSS is a powerful layout model designed to make it easier to create flexible and responsive web designs. It excels at handling both one-dimensional and two-dimensional layouts, aligning items, and distributing space efficiently.

Key Concepts:

• Flex Container: The parent element that holds the flex items and defines the flex context using display: flex or display: inline-flex.

• Flex Items: The direct children of the flex container, which are arranged using flexbox properties.

• Main Axis: The primary direction along which flex items are laid out (row or column).

• Cross Axis: The perpendicular axis to the main axis.

Flex Container Properties:

1. display:

• Values: flex | inline-flex

• Defines a flex container. By default, it is a block-level container, but inline-flex makes it an inline-level container.

.flex-container {
  display: flex; /* or inline-flex */
}

2. flex-direction:

• Values: row | row-reverse | column | column-reverse

• Establishes the main axis of the flex container. row is the default, creating a row layout. column creates a column layout.

.flex-container {
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

3. flex-wrap:

• Values: nowrap | wrap | wrap-reverse

• Determines whether flex items are forced onto one line or can wrap onto multiple lines.

.flex-container {
  flex-wrap: wrap; /* or nowrap, wrap-reverse */
}

4. flex-flow:

• Values: row wrap | column wrap | row nowrap | column nowrap

• The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

.flex-container {  
    display: flex;  
    flex-flow: row wrap;
}

5. justify-content:

• Values: flex-start | flex-end | center | space-between | space-around

• Aligns flex items along the main axis.

.flex-container {
  justify-content: space-between; /* or flex-start, flex-end, center, space-around */
}

6. align-items:

• Values: flex-start | flex-end | center | baseline | stretch

• Aligns flex items along the cross axis.

.flex-container {
  align-items: center; /* or flex-start, flex-end, stretch, baseline */
}

7. align-content:

• Values: flex-start | flex-end | center | space-between | space-around | stretch

• Aligns the lines within the flex container when there is extra space on the cross axis.

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

Flex Item Properties:

1. flex:

• Shorthand for flex-grow, flex-shrink, and flex-basis.

• flex: 1 is a common usage to distribute available space equally among flex items.

.flex-item {
  flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

2. order:

• Defines the order in which a flex item appears in the flex container.

.flex-item {
  order: 2; /* or any integer value */
}

3. align-self:

• Allows the default alignment to be overridden for a single flex item.

.flex-item {
  align-self: flex-end; /* or auto, flex-start, center, stretch, baseline */
}

Common Use Cases:

• Creating navigation bars

• Aligning elements within forms

• Building responsive image galleries

• Creating multi-column layouts

• Implementing card-based designs

• Building complex grid systems

Example:

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

.flex-item {
  flex: 1;
  margin: 10px;
}

This example creates a flex container with various properties set, such as row layout, items spaced evenly with margins, centered along the cross-axis, allowing items to wrap onto multiple lines, and aligning content within the container. The .flex-item class gives flexibility to individual items within the container.

Additional Resources:

Flexbox Froggy Game

MDN References