Sololearn blogA Complete Guide To Flexbox
time to read 7 min read

A Complete Guide To Flexbox

Flexibility in the human body allows better movement of the body and enhances the body’s performance physically. In web design, Flexbox brings much-needed flexibility when used to align items on the webpage and allows better movements of the items, which enhances web layout performance on different screen sizes. 

Flexbox is a CSS module that is being hyped in the web design and development community. The reason for this hype is not wrong, as Flexbox has a lot of cool things under its belt. 

Before the flexbox, web developers used the float or tables property to align items in the CSS. Nowadays, flexbox allows you to create better, and  more responsive layouts.

Main size and Cross size

When designing with CSS, you use Containers (HTML tags) to group items of similar properties. 

You define a flex container in CSS by inserting display: flex; to your container or item tag on your style sheet.

Flex Containers have various features such as the following.

Main Axis

The main axis is the basic axis of the flexbox. It could be horizontal or vertical, depending on the flex-direction. 

For example:

Let’s assume that the layout below is a flexbox layout.

The flex-direction of the layout below is set to row, the main axis will be from left to right (which means it is horizontal )

—————-> main axis (from home to contact)

            HOME       ABOUT            CONTACT

Example;  Below is how it will look when the flex-direction is set to a column. The main axis will be vertical (top to bottom).                                                                           


              HOME

             ABOUT

            CONTACT
Flex-directionMain axis
RowHorizontal ( text-direction)
ColumnVertical  ( top to bottom)
Row-reverseHorizontal (opposite to text direction )
column-reverseSame as row reverse but vertical

Main Size 

The main size refers to the dimension of the main axis, which could be its height or width. The property specifies how tall or long your flexbox will be.

Main Start or Main End

The main start and end are where the main axis of the flexbox starts and ends. 

Cross Axis 

The Flexbox secondary axis is the cross axis. It is the inverse of the main axis. This means that if the main axis is vertical, the cross axis will be horizontal, and vice versa. 

In other words, the cross axis is perpendicular to the main axis.

Cross Size

The cross size is the dimension of the cross axis. It works together with the main size to determine the total size of your flexbox.

Cross Start or Cross End 

The cross start or end specifies where your flexbox’s secondary axis begins and ends.

Flexbox properties

Flexbox properties are ways you can manipulate the containers and their items in a Flexbox layout. 

You can use values to apply the various properties to your flexbox layout. There are many flexbox properties grouped into the container and item properties. 

Flexbox Container Properties

The flex container is the parent element of a flexbox layout. The value of the property is a reference to a flexbox container. We’ve many container properties. They include:

Display

This property must be declared using one of its two values to create a flex container.

The property has two layouts, including.

  • Flex Layout 
  • in-Line Flex 
.container {
  /* to declare the flex display */
  display: flex;
}

.container {
  /* to declare the inline-flex display */
  display: inline-flex;
}

Flex Direction 

After declaring your flexbox container model, you will need to specify the direction of the flex items. You can use several values to specify the direction. The values are:

  • Row 

It is the default value of the CSS flex items. This value displays the flex items in a row.

.container {
  /* to declare the row direction */
  flex-direction: row;
}
  • Column

The column value displays flex items in a column. 

.container {
  /* to declare the column direction */
  flex-direction: column;
}
  • Row Reverse 

The row reverse value inversely displays flex items in a row. 

.container {
  /* to declare the row-reverse direction */
  flex-direction: row-reverse;
}
  • Column Reverse 

This value inversely displays the flex items in a column.

.container {
  /* to declare the column-reverse direction */
  flex-direction: column-reverse;
}

Flex wrap 

The next property you need to add to your Flexbox to make it responsive to different layouts is the Flex wrap. 

Flex items will try to fit on one line, but with this property, you can change it and allow the items to wrap as desired. The values you can use are:

  • Nowrap

This value wraps your flex items into a single line. It is the default format and flex items will display in this format if you don’t add the flex-wrap property.

.container {
  /* to declare flex-wrap value */
  flex-wrap: nowrap;
}
  • Wrap

This value wraps your items into multiple lines. It is the preferred value for developers because it gives flexibility to items. 

.container {
  /* to declare flex-wrap value */
  flex-wrap: wrap;
}
  • Wrap-Reverse 

This value inversely wraps your  items into multiple lines.

.container {
  /* to declare flex-wrap value */
  flex-wrap: wrap-reverse;
}

Flex-Flow

The flex-flow property is a combination of the flex-wrap and the flex-direction property. It allows you to declare the two properties in one line of code.

Example:

If you want your flex-direction to be column and flex-wrap to be wrap you can use flex-flow to achieve that in one line of code. 

.container {
  /* to declare flex-flow value */
  flex-flow: column wrap;
}

Justify-Content 

You can align your items on the main axis using this property. It places your items at the end, center, and start of the axis. 

You can also space the items using this property. The values you can use are:

  • Flex-Start

Flex-start aligns your items at the start of the flex-direction.

The value is the default value, and items will display in this format if you don’t add the justify-content property.

.container {
  /* to declare Justify content value */
  justify-content: flex-start;
}
  • Center

This value moves your items to the center of the main axis.

.container {
  /* to declare Justify content value */
  justify-content: center;
}
  • Space Between 

This value arranges items with spaces between them from the start to the end of the main axis.

Example: Let's Code
.container {
/* to declare Justify content value */
  justify-content: space-between;
}
  • Space Evenly

This value ensures that there are equal spaces between and around each item.

.container {
  /* to declare Justify content value */
  justify-content: space-evenly;
}
  • Flex-End

You can use this value to align items to the end of the flex-direction.

.container {
  /* to declare Justify content value */
  justify-content: flex-end;
}

Align items

The Align items’ property focuses on the cross axis. It moves items along the cross axis. The values you can use for this property are:

  • Stretch

This value is the default format. It spreads items to fill the container.

.container {
  /* to declare align-items value */
  align-items: stretch;
}
  • Flex-Start

Like the justify-content property, these values also move items to the start of the flex-direction or the writing mode on the cross axis.

.container {
  /* to declare align-items value */
  align-items: flex-start;
}
  • Center

The value moves items to the center of the cross axis.

.container {
  /* to declare align-items value */
  align-items: center;
}
  • Baseline 

The value specifies the alignment of items according to their content’s baseline.

.container {
  /* to declare align-items value */
  align-items: baseline;
}
  • Flex-End

These values move items to the end of the flex-direction or writing modes on the cross axis.

.container {
  /* to declare align-items value */
  align-items: Flex-end;
}

Align Content

This property aligns items around the extra spaces of the cross axis. It performs a similar function to the justify-content property. 

However, this property only works when: 

  • You have multi-line flexible boxes; 
  • And flex-wrap is not the default (it should either be in wrap or wrap-reverse).

The values you can use are: 

  • Flex-start
  • Flex-end
  • Center
  • Space-between
  • Space-around
  • Space-evenly
  • Stretch

Flexbox Items Properties

The flexbox item property allows you to define the size and position of each item in a flexbox.  

Order

You can use this property to change your item’s order or position. To use this property, you simply add order to your item tag elements. 

The item with the lowest number will be at the start while the item with the highest order will be moved to the end.

The order property values are numerically positive numbers, such as 1, 2, 3, and 4. The property’s default value is 0.

.item {
  order: /* specify the order number of the item here*/ ;
}

Flex grow

This property makes the flex item grow to a specified width or size as desired. It is used to specify how an item should grow to use the extra space on the webpage.

The flex-grow values are also numerically positive numbers, such as 1, 2, 3, and 4. The property’s default value is 0.

.item {
  flex-grow: /* specify the flex-grow number of the item here*/ ;
}

Flex shrink

When necessary, this property shrinks a flex item to a specific size. Its values, like the flex-grow, are positive numerical values.

Its default value is 1.

.item {
  flex-shrink: /* specify the flex-shrink number of the item here*/ ;
}

Flex basis

The flex-basis specifies an item’s default size. 

When you use flex-basis to define an item’s size and set a flex-shrink default value for the item. It prevents your item from overflowing and makes your item grow according to the container or viewport’s size.

If you want to use the item class size as your flex-basis size set flex-basis value to auto.

Note!

Flex-basis can be overridden by min and max-width values. So, you don’t have to set min and max-width values because flex-basis provides a better responsive layout. 

.item {
  flex-basis: /* specify the flex-basis here */ ;
}

Flex

This is a combination of flex-grow, flex-shrinks, and flex-basis. When using the flex property, you can place the 3  values in a single line. 

The first value is for the flex-grow, while the second and last value is for the flex-shrink and the flex-basis.

.item {
  flex: ; /* specify (flex-grow) (flex-shrink)  (flex-basis) here*/
}

Align self

This property allows the alignment of a particular item without affecting other items in the container. 

The property uses the same values as the align-items property.

.item {
  align-self: /* specify your align-self value here */ ;
}

Prefixing Flexbox

Prefixing is a concept that has been around for a while. It allows web developers to add support for new CSS features before it adapts to different browsers.

 Below are some CSS browser prefixes.

Browsers Prefixes 
Android
-webkit-
Chrome
-webkit-
Firefox:
-moz-
Internet Explorer
-ms-
IOS
webkit-
Opera
-o-
Safari
-webkit-

Introducing a Prefix

Before adding a prefix to your browser, make sure that the feature supports prefixes. This is because most CSS features do not need prefixes. 

To prefix a flexbox, you’ve to create the flexbox property and associate it with each CSS browser prefix. 

Illustration:

/* let's use align-items for this feature*/
.Feature {
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  align-items: stretch;
}

Conclusion

With Flexbox, you can align content according to your needs and requirements. Thus, making use of all available screen space the way you want on all devices. 

Do you want to learn more about Flexbox? consider taking a CSS course on Sololearn’s website. Also, Sololearn offers courses on different programming languages that might interest you.

References

  • Damme, T. V., Merkenich, J., Coyier, C., Mejia, L., Seyedi, M., Gaebel, D., Khare, M., Graham, G., Rendle, R., El-Alfy, A., Matuzovic, M., & Holt, B. (2022, April 29). A complete guide to flexbox: CSS-tricks. CSS. Retrieved August 12, 2022, from https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

Related blogposts