FlexBox Mastery: The Ultimate Guide to Powerful CSS Layouts

In this tutorial, we will learn about Flexbox and its uses in modern web development.

What is Flexbox?

The Flexbox is a Modern way of laying out elements in a 1-dimensional row without using floats. 

Flexbox is a set of related CSS properties for building 1-dimensional layouts.

The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements.

Flexbox makes it easy to automatically align items to one another inside a parent container, both horizontally and vertically

Flexbox solves common problems such as vertical centering and creating equal-height columns

Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner HTML and CSS code.

Flexbox properties

flex container Properties  (Parent)

display

This defines a flex container.

.container {
  display: flex;
}

flex-direction

To define which is the main axis

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

Flex-direction accepts the following values:

• row: Items are placed the same as the text direction.
• row-reverse: Items are placed opposite the text direction.
• column: Items are placed from top to bottom.
• column-reverse: Items are placed from bottom to top.

Notice that when you set the direction to a reversed row or column, start and end are also reversed.

Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

flex-wrap

To allow items to wrap into a new line if they are too large

.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

To align items along main axis (horizontally, by default)

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

the justify-content property accepts the following values:

flex-start: Items align to the left side of the container.

flex-end: Items align to the right side of the container.

center: Items align at the center of the container.

space-between: Items display with equal spacing between them.

space-around: Items display with equal spacing around them.

align-items

To align items along the cross axis (vertically, by default)

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

align-item property accepts the following values:

• flex-start: Items align to the top of the container.
• flex-end: Items align to the bottom of the container.
• center: Items align at the vertical center of the container.
• baseline: Items display at the baseline of the container.
• stretch: Items are stretched to fit the container.

align-content

Only applies when there are multiple lines (flex-wrap: wrap)

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

This property takes the following values:

• flex-start: Lines are packed at the top of the container.
• flex-end: Lines are packed at the bottom of the container.
• center: Lines are packed at the vertical center of the container.
• space-between: Lines display with equal spacing between them.
• space-around: Lines display with equal spacing around them.
• stretch: Lines are stretched to fit the container.

gap

To create space between items, without using margin

.container {
  gap:10;
}

flex items(Children)

align-self

To overwrite align-items for individual flex items

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 This property accepts the same values as align-items and its value for the specific item. 

flex-grow

To allow an element to grow (0 means no, 1+ means yes)

.item {
  flex-grow: 4; /* default 0 */
}

flex-shrink

To allow an element to shrink (0 means no, 1+ means yes)

.item {
  flex-shrink: 3; /* default 1 */
}

flex-basis

To define an item’s width, instead of the width property

.item {
  flex-basis:  | auto; /* default auto */
}

flex

Recommended shorthand for flex-grow, -shrink, -basis.

.item {
  flex: 0 1 auto
}

order

Controls order of items. -1 makes item first, 1 makes it last

.item {
  order: 5; /* default is 0 */
}

Conclusion

FlexBox is a powerful tool for web designers, offering unparalleled control over CSS layouts. By mastering FlexBox, you'll not only create visually stunning websites but also optimize them for SEO success. With the comprehensive guide and code examples provided, you now have the knowledge and practical implementations to embark on your FlexBox journey. Start mastering FlexBox today to unlock the potential for creating exceptional user experiences and boosting your search engine rankings.