A Guide To Flexbox

Flexbox is a true revolution in CSS completely changes the way that we build one-dimensional layouts, it makes easy to align elements to one another, in different directions and orders.

When elements are laid out as flex items, they are laid out along two axes:

• The main axis is the axis running in the direction the flex items are laid out, The default direction is horizontal left to right.
• The cross axis is the axis running perpendicular to the direction the flex items are laid out in.
• The parent element that has display: flex is called the flex container.
• The items laid out as flexible boxes inside the flex container are called flex items

Flexbox Container Properties

• display: It enables a flex context for all its direct children.

.container {
  display: flex;
}

• flex-direction: It enables a flex container to by laid out in horizontal left to right or vertical top to bottom

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

/*
row (default): left to right.
row-reverse: right to left.
column: top to bottom.
column-reverse: bottom to top.
*/

• flex-wrap: By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

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

/*
nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
*/

• justify-content: controls where the flex items sit on the main axis.

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

/*
flex-start (default): items are packed toward the start of the flex-direction.

flex-end: items are packed toward the end of the flex-direction.

center: items are centered along the line.

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line.

space-around: items are evenly distributed in the line with equal space around them. 

space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
*/

• align-items: controls where the flex items sit on the cross axis.

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

/*
stretch (default): stretch to fill the container.

flex-start: items are placed at the start of the cross axis.

flex-end: items are placed at the end of the cross axis.

center: items are centered in the cross-axis.

baseline: items are aligned such as their baselines align.
*/

• align-content: This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

/* similar to justify content */

• gap: controls the space between flex items.

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

/*
row-gap: explicitly controls the space between rows.

column-gap: explicitly controls the space between column.
*/