CSS Flexbox: learn step by step

CSS Flexbox is a flexible content layout mode. This way we avoid using float or position. It allows frontend designers to easily create flexible and adaptable layouts that perfectly fit the content and screen size. In this step-by-step tutorial, I’ll show you how to use Flexbox to create dynamic and intuitive designs.

CSS is made up of many different layout algorithms, officially known as “design modes”. Each design mode is its own sublanguage within CSS. The default layout mode is Flow Design, but we can opt for Flexbox by changing the display property in the main container. 

When we switch display to flex, we create a “flexible formatting context”. This means that, by default, all child elements will be placed according to the Flexbox design algorithm.

How does CSS Flexbox work?

Flexbox handles the layout in only one dimension at a time (as a row or as a column but only one). This is different with the CSS Grid model, which handles columns and rows at the same time. Below I explain why Flexbox is still used and why CSS Grid has not superseded it when it comes to sorting elements into rows or columns.

With CSS Flexbox we will have the main container (flex container) and the elements that are inside that main container (flex items).

Flex container properties

display

As we indicated at the beginning of the article, the first thing is to indicate that it is flex, where you are specifying the flow design mode you are using.

flex-direction

It will indicate the address, if it is row or column and in which direction. It has the following values:

• row (default): left-to-right in ltr; right-to-left in rtl
• Row-reverse: right-to-left in LTR; left-to-right in RTL
• Column: same as row but from top to bottom
• column-reverse: same as row-reverse but from the bottom up

flex-wrap

This property is if you want all the elements to be on a single line. And the values are:

• nowrap(default): all flexible elements will be on one line
• Wrap: Flexible elements will fit several lines, from top to bottom.
• wrap-reverse: flexible elements will fit several lines from bottom to top.

flex-flow

It is a shorthand for the flex-direction and flex-wrap properties , which define the main and transverse axes of the flexible container. Its default value is row nowrap. 

align-items

As the elements are aligned, all above, all below, in the center, which occupy all the content … These are the values:

• stretch(default): stretch to fill the container (still respects the minimum width/maximum width)
• flex-start: the elements are placed at the beginning of the transverse axis. The difference between these is subtle, and it is about respecting the  flex-direction or the writing-mode. 
• flex-end: the elements are placed at the end of the transverse axis. The difference again is subtle and it is about respecting flex-direction versus writing-mode. 
• center: the elements are centered on the transverse axis
• Baseline: Elements are aligned as their baselines align

justify-content

Indicates how the content will be displayed and are as follows:

• flex-start(default): Items are packed towards the start of the flexible address.
• Flex-end: Items are packed towards the end of the bending direction.
• start: articles are packed towards the beginning of the writing-mode address.
• END: Articles are packed towards the end of the writing-mode address.
• left: items are packed towards the left edge of the container, unless that doesn’t make sense with flex-direction, then it behaves like start.
• Right: Items are packed towards the right edge of the container, unless that doesn’t make sense with flex-direction, then it behaves like END.
• center: elements are centered along the line
• space-between: items are evenly distributed on the line; the first item is on the starting line, the last item on the end line
• Space-around: Items are evenly distributed on the line with the same space around them. Note that visually the spaces are not equal, as all elements have the same space on both sides. The first element will have one unit of space against the edge of the container, but two units of space between the next element because that next element has its own space that applies.  
• space-evenly: The elements are distributed so that the space between any two elements (and the space to the edges) is equal.

The most used are flex-start, flex-end and center.

align-content

The values are:

• Normal(default): Parts are used in their default position as if no value was set.
• flex-start/ start: items located at the beginning of the container. The (most compatible) flex-start with the flex-direction while start with the  writing-mode direction. 
• flex-end/ end: items located up to the end of the container. The (more support) flex-end with the flex-direction while the end with the  writing-mode direction. 
• Center: Container-centric items
• space-between: evenly distributed items; the first line is at the beginning of the container while the last is at the end.
• space-around: evenly distributed items with the same space around each line.
• Space-evenly: The elements are evenly distributed with the same space around them.
• Stretch: The lines are stretched to occupy the remaining space.

Flex item properties

align-self

Overrides the default alignment (or align-items ) for individual soft elements.

Float, clear, and vertical-align have no effect on a flexible element.

flex-grow

It is a great property to give different sizes in each element.

If all elements have been flex-grown set to 1, the remaining space in the container will be distributed equally to all children. 

If one of the children has a value of 2, that child would take up twice as much space as any of the others (or will try, at least).

flex-shrink

Defines the ability for a flexible element to shrink if necessary.

flex-basis

Displays the default size of an item before the remaining space is distributed. 

If set to 0, the extra space around the content is ignored. If set to auto, the additional space is distributed based on its flex-grow value.

In a Flex row, flex-basis does the same as

width. In a Flex column,  flex-basis does the  same as height. 

flex

This is short for flex-grow, flex-shrink and flex-basis combined. The second and third parameters ( flex-shrink and  flex-basis) are optional. The default value is 0 1 auto.  

order

By default, flexible elements are presented in the order of origin. The order property controls the order in which they appear in the flexible container. 

Flexbox CSS Samples

Below you can see

very practical examples, where you can see all the advantages of using this model.

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

I have also developed a post with css games, among which is some flexbox, so learning will be more fun.

Flexbox CSS Generators

Many times we look for tools that save us time. With the generators that I indicate below, you can see graphically, how your elements will be aligned according to the instructions you choose. Try them and tell me:

https://htmlcss.tools/css/flexbox

https://flexbox.tech/

https://loading.io/flexbox/

CSS Flexbox Courses

Main benefits of using CSS Flexbox

CSS Flexbox is an extremely useful tool for frontend web developers, as it allows us to create flexible and adaptable layouts. This means that designs can be easily changed and adapted as needed. This is especially useful for mobile devices, because designs can be adjusted so that they look good on small screens. In addition, Flexbox also makes it easier to distribute page elements evenly, allowing for a cleaner and neater layout.

 Flexbox is not obsolete?

We can think that when there is CSS Grid it is no longer necessary to use CSS Flexbox.

CSS Grid is a wonderful design mode, but it solves different problems than Flexbox. We should learn both design modes and use the right tool for the job.   

Flexbox is still king when it comes to dynamic and fluid user interfaces that organize items into a vertical or horizontal list. 

So obsolete nothing at all.