About Flexbox layout

The flex CSS property specifies how a flex item will grow or shrink to fit the space available in its flex container.

Flexbox is a CSS web layout model. It’s a one-dimensional system, which means we can work with rows or columns. It allows responsive elements to be rearranged depending on screen size, which helps to position child elements and the main container. we can also use it to set the length of flexible items. The layout is based on both block and inline flow directions. Please have a look at this figure from the specification, explaining the main idea behind the flex layout.

The main axis of flex has four different directions: Row, Row-reverse, Column, and column-reverse. Flex consists of a set of properties some of them are meant to be set on the container (parent element, known as flex container) whereas the others are meant to be set on the children (said flex items).In this blog, we are only going to deal with flex container property.

Flex container (Parent properties)

• Display

• Flex-direction

• Flex-wrap

• Flex-flow

• Justify-content

• Align-items

• Align-content

• Gap, row-gap, column-gap

Display

The flex container becomes flexible by setting the display property to flex.

• display: flex : Flex displays an element as a flexible structure.
• display: inline-flex: It will make flex-container an inline element.
• display: block-flex: It will make flex-container a block element.

.flex-container {
  display: flex | inline-flex | block-flex;
}

Note: CSS columns do not affect a flex container.

Flex-direction

Flex-direction property defines the direction of flex items of the container on the main axis. It sets the direction of flexible items.

• flex-direction: column It set's the flex items vertically (from top to bottom).
• flex-direction: column-reverse It set's the flex items vertically (but from bottom to top).
• flex-direction: row It set's the flex items horizontally (from right to left).
• flex-direction: row-reverse It set's the flex items horizontally (but from left to right).
• flex-direction: initial It set’s value to the default.
• flex-direction: inherit It set's inherit the value from the parent.

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

Try it on yourself

Flex-wrap

Flex-wrap controls the behavior that items will move into the next line. initially, flex items try to fit in one line. so wrap property allows the items to wrap if the container width is less than the total item width.

• flex-wrap: no-wrap fit into one line by adjusting the width of the item
• flex-wrap: wrap item will be laid down to next line from top to bottom
• flex-wrap: wrap-reverse item will be laid down to next line from bottom to top

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

Try it yourself

Flex-flow

This is a shorthand property for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row no-wrap.

Here are some examples of flex-direction in the row.

Above we saw an example of flex-flow where flex-direction is row. You can do the same for the flex-direction column just consider the above thing vertically

.flex-container {
  flex-flow: column wrap | row wrap| <flex-direction> | <flex-wrap>;
}

Justify-content

Justify-content is used to align items on the main-axis (x-axis). It consists of different values like center, start or end or giving space between them, that helps to arrange the child items in the position we want.

• justify-content: flex-start: (default) items are packed toward the start of the flex-direction.
• justify-content: flex-end: items are packed toward the end of the flex-direction.
• justify-content: center :items are centered along the line.
• justify-content: space-between: items are evenly distributed in the line, the first item is on the start line, the last item is on the end line.
• justify-content: space-around: items are evenly distributed in the line with equal space around them.

  Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

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

As you can see above flex-start started from the right side, not from the writing mode direction

start: items are packed toward the start of the writing-mode direction.
end: items are packed toward the end of the writing-mode direction.
left: items are packed toward the left edge of the container unless that doesn’t make sense with the flex-direction, then it behaves like a start.
right: items are packed toward the right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like an end.

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

Try it yourself

Align-items

Align-items are used to align items on the cross axis(y-axis/perpendicular to the main axis). You can consider it as a justify-content version along the cross axis.

• align-items: stretch: (default) occupies the full height of the container if height to the items is not given externally.
• align-items: flex-start / start / self-start : items are placed at the start of the cross axis. The difference between these is subtle and is about respecting the flex-direction rules or the writing-mode rules.
• align-items: flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
• align-items: center: items are centered in the cross-axis.
• align-items: baseline: items are aligned such as their baselines align in consideration with cross-axis.

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

Try it yourself

Align-content

Align-content is used to align a row (flex line) of containers along the cross axis.
The difference between align-items and align-content is align-items consider items and align-content considers rows to align along the cross axis.

Note:
This property only takes effect on multi-line flexible containers (where flex-wrap: wrap|wrap-reverse). A single-line flexible container (i.e. where flex-wrap: default | no-wrap) will not reflect align-content

• align-content: normal: (default) flex lines are packed in their default position as if no value was set.
• align-content: flex-start: lines are packed to the start of the container. The (more supported) flex-start honors the flex-direction while the start honors the writing-mode direction.
• align-content: flex-end: lines are packed to the end of the container.
• align-content: center: lines are centered in the container.
• align-content: space-between: lines are evenly distributed; the first line is at the start of the container while the last one is at the end.
• align-content:space-around: lines are evenly distributed with equal space around each line
• align-content:space-evenly: lines are evenly distributed with equal space around them
• align-content: stretch: lines stretch to take up the remaining space.

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

Try it yourself

Gap, row-gap, column-gap

Gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.

• gap: 10px; space is applied equally between the items.
• gap: 10px 20px: set's gap along row-gap column gap.
• row-gap: 10px: set's gap along the row.
• column-gap: 20px: set's gap along the column.

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

Try it yourself

This is how flexbox is used in CSS. So, that's it for now, we are left with flex-items (child property). which we will discuss in our upcoming blog.
I hope you enjoyed reading this blog and find it helpful. Thanks for reading 🙏, Any further suggestions are highly appreciated 💐