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
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.
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
Row-reverse: right-to-left in
LTR; left-to-right in
Column: same as
rowbut from top to bottom
column-reverse: same as
row-reversebut from the bottom up
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.
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
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-end: the elements are placed at the end of the transverse axis. The difference again is subtle and it is about respecting
center: the elements are centered on the transverse axis
Baseline: Elements are aligned as their baselines align
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
END: Articles are packed towards the end of the
left: items are packed towards the left edge of the container, unless that doesn’t make sense with
flex-direction, then it behaves like
Right: Items are packed towards the right edge of the container, unless that doesn’t make sense with
flex-direction, then it behaves like
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.
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
flex-end/ end: items located up to the end of the container. The (more support) flex-end with the flex-direction while the
Center: Container-centric items
space-between: evenlydistributed items; the first line is at the beginning of the container while the last is at the end.
space-around: evenlydistributed 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
Overrides the default alignment (or
align-items ) for individual soft elements.
vertical-align have no effect on a flexible element.
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).
Defines the ability for a flexible element to shrink if necessary.
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
In a Flex row, flex-basis does the same as
width. In a Flex column,
flex-basis does the
This is short for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (
flex-basis) are optional. The default value
0 1 auto.
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.
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:
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.