Hackforge Academy

Explanation

Flexbox is a one-dimensional layout system that makes it easy to align and distribute elements horizontally or vertically.

Code:

.container {
  display: flex;
}

Explanation

The justify-content property controls horizontal alignment of flex items inside the container.

Code:

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

Explanation

The align-items property controls vertical alignment of flex items along the cross axis.

Code:

.container {
  display: flex;
  align-items: center;
  height: 200px;
}

Explanation

The flex-direction property changes the direction of flex items from row to column or vice versa.

Code:

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

Explanation

The gap property adds consistent spacing between flex items without using margins.

Code:

.container {
  display: flex;
  gap: 20px;
}