Flexbox

Use of flexbox

Flexbox allows you to create flexible grid and layouts. It is supported by all modern browsers, and is a great way to create responsive designs.

/* Syntax to use flexbox */
.flex-container {
  display: flex;
  gap: 8px;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start | flex-end | center | baseline | stretch;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Flexbox properties for the parent element

Flex direction

The flex-direction property specifies the direction of the flexible items. The possible values are:

• row: The flex items are displayed in a row, from left to right.
• row-reverse: The flex items are displayed in a row, from right to left.
• column: The flex items are displayed in a column, from top to bottom.
• column-reverse: The flex items are displayed in a column, from bottom to top.

.flex-container {
  display: flex;
  gap: 8px;
  padding: 8px;
  background-color: lavender;
}

.row {flex-direction: row;}
.row-reverse {flex-direction: row-reverse;}
.column {flex-direction: column;}
.column-reverse {flex-direction: column-reverse;}

Flex wrap

The flex-wrap property specifies whether the flexible items should all fit on one line or can wrap onto multiple lines. The possible values are:

• nowrap: The flexible items should all be on one line.
• wrap: The flexible items can wrap onto multiple lines.
• wrap-reverse: The flexible items can wrap onto multiple lines, but they are displayed in the opposite order.

.flex-container {
  display: flex;
  width: 230px;
  background-color: lavender;
}

.wrap {flex-wrap: wrap;}
.nowrap {flex-wrap: nowrap;}
.wrap-reverse {flex-wrap: wrap-reverse;}

.flex-item {
  height: 50px;
  width: 50px;
  background-color: #beb;
}

Justify content

The justify-content property specifies how the flexible items are positioned along the main axis. The possible values are:

• flex-start: The flexible items are positioned at the start of the main axis.
• flex-end: The flexible items are positioned at the end of the main axis.
• center: The flexible items are positioned at the center of the main axis.
• space-between: The flexible items are evenly distributed in the main axis. The first item is on the start line, the last item is on the end line, and the spaces between them are equal.
• space-around: The flexible items are evenly distributed in the main axis. The spaces between them are equal.

.flex-container {
  display: flex;
  width: 100%;
  background-color: lavender;
}

.flex-start {justify-content: flex-start;}
.flex-end {justify-content: flex-end;}
.center {justify-content: center;}
.space-between {justify-content: space-between;}
.space-around {justify-content: space-around;}

.flex-item {
  height: 50px;
  width: 50px;
  background-color: #beb;
}

Align items

The align-items property specifies how the flexible items are positioned along the cross axis. The possible values are:

• flex-start: The flexible items are positioned at the start of the cross axis.
• flex-end: The flexible items are positioned at the end of the cross axis.
• center: The flexible items are positioned at the center of the cross axis.
• baseline: The flexible items are positioned such that their baselines align.
• stretch: The flexible items are stretched such that the cross-axis stretches to fit the container.

.flex-container {
  display: flex;
  width: 100%;
  min-height: 6rem;
  background-color: lavender;
}

.flex-start {align-items: flex-start;}
.flex-end {align-items: flex-end;}
.center {align-items: center;}
.baseline {align-items: baseline;}
.stretch {align-items: stretch;}

.flex-item {
  height: 50px;
  width: 50px;
  background-color: #beb;
}

/* Odd items have a height of 1rem */
.flex-item:nth-child(2n-1) {height: 1rem;}

/* Even items have a height of 3rem */
.flex-item:nth-child(2n) {height: 3rem;}

/* Required for stretch to work */
.stretch > .flex-item {height: auto;}

Align content

The align-content property specifies how the flexible items are positioned along the cross axis. The possible values are:

• flex-start: The flexible items are positioned at the start of the cross axis.
• flex-end: The flexible items are positioned at the end of the cross axis.
• center: The flexible items are positioned at the center of the cross axis.
• space-between: The flexible items are evenly distributed in the cross axis. The first item is on the start line, the last item is on the end line, and the spaces between them are equal.
• space-around: The flexible items are evenly distributed in the cross axis. The spaces between them are equal.
• stretch: The flexible items are stretched such that the cross-axis stretches to fit the container.
• baseline: The flexible items are positioned such that their baselines align.

.flex-container {
  display: flex;
  width: 230px;
  background-color: lavender;
}

.flex-start {align-content: flex-start;}
.flex-end {align-content: flex-end;}
.center {align-content: center;}
.space-between {align-content: space-between;}
.space-around {align-content: space-around;}
.stretch {align-content: stretch;}
.baseline {align-content: baseline;}

.flex-item {
  height: 50px;
  width: 50px;
  background-color: #beb;
}

/* Odd items have a height of 1rem */
.flex-item:nth-child(2n-1) {height: 1rem;}

/* Even items have a height of 3rem */
.flex-item:nth-child(2n) {height: 3rem;}

Flexbox properties for the children elements

Flex grow

The flex-grow property specifies how much the flexible items should grow relative to the rest of the flexible items.

You can use flex-grow to create proportional layouts and grids. The width of each flexible item is calculated as the fraction of the available space it should occupy, relative to the other flexible items. For example:

.flex-container {
  display: flex;
  width: 464px;
  background-color: lavender;
}

.flex-item {
  background-color: #beb;
  flex-grow: 1;
}

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

The flex-grow property can be used to fill up the leftover space in a flexible container.

.flex-container {
  display: flex;
  width: 464px;
  background-color: lavender;
}

.flex-item {
  background-color: #beb;
  flex-grow: 1;
}

.grow-1 {flex-grow: 1;}

.fixed {width: 64px;}

Self alignment

The align-self property adjust the alignment on a per element basis. The possible values are:

• flex-start: The element is positioned at the start of the cross axis.
• flex-end: The element is positioned at the end of the cross axis.
• center: The element is positioned at the center of the cross axis.
• baseline: The element is positioned such that their baselines align.
• stretch: The element is stretched such that the cross-axis stretches to fit the container.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item flex-start">2</div>
  <div class="flex-item flex-end">3</div>
  <div class="flex-item center">4</div>
  <div class="flex-item baseline">5</div>
  <div class="flex-item stretch">6</div>
</div>

.flex-container {
  display: flex;
  width: 464px;
  height: 8rem;
  background-color: lavender;
}

.flex-item {
  background-color: #beb;
height: 1rem;
  flex-grow: 1;
}

.flex-start {align-self: flex-start;}
.flex-end {align-self: flex-end;}
.center {align-self: center;}
.baseline {align-self: baseline;}
.stretch {
  align-self: stretch; 
  /* Necessary for 'stretch' to work */
  height: auto; 
}