How to Use Flexbox Layouts for Effective Web Design

Single-row layout in flexbox refers to a flex container where the flex items are arranged in a horizontal row, with optional alignment and spacing.

Syntax:

display: flex;
justify-content: [ <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
flex-item: value;

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

.flex-item {
  flex-basis: 15%;
}

A multi-row layout in flexbox is a flexible design technique that allows for the creation of multiple rows of items that respond to different screen sizes.

Syntax:

display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: [ <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
flex-item: value;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
  column-gap: 10px;
}
.flex {
  flex-basis: calc(33.33% - 20px);
}

Column layout in Flexbox is a layout mode where items are arranged vertically in a column, with each item taking up the full width of the container.

Syntax:

display: flex;
justify-content: [ <content-distribution> | <overflow-position>? [ <content-position> | left | right ];

.container {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  column-gap: 10px;
}

Multi-column layout in Flexbox allows for the creation of flexible, responsive web page designs with multiple content sections organized in rows and columns.

Syntax:

display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: [ <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
flex-item: value;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: 10px;
}
.flex {
  flex-basis: calc(33.33% - 10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

The Holy Grail layout in Flexbox is a popular web design pattern that features a header, footer, and three columns of content that can be dynamically resized and repositioned using Flexbox properties.

Syntax:

display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex: <value>;

.wrapper {
  display: flex;
  flex-direction: column;
}

main {
  flex: 2;
}

nav {
  flex: 0.5;
}

aside {
  flex: 1;
}