The Complete CSS Flexbox Tutorial
CSS Flexbox — Basic Concepts
An Introduction to Flexbox in CSS
Flexbox is a single-direction concept. Just like the Box Model in CSS, there is something called the flex model, which can help us to visualize the layout a lot better way.
Much like CSS Grid, Flexbox is quite complex because it consists of not one but two element types. But Definitely, I do not think it is challenging to learn, let us make it easy through insights.
In flexbox, there are mainly two entities — The parent container (the flex container) and the immediate children elements (the flex items). In this, we have to deal with two axes — the main axis which runs from left to right, and the cross axis which is perpendicular to the main axis and runs from top to bottom. Below are the flexbox properties explained with examples —
Flex-direction —
The flex-direction CSS property establishes the main axis and defines the direction (normal or reversed) of flex items placed in the flex container.
- row — (default value) Flex items are displayed horizontally, as a row
- row-reverse — Same as row, but in reverse order
- column — The flex items are displayed vertically, as a column
- column-reverse — Same as the column, but in reverse order
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
On CodePly editor, check out this ply LINK where the concept of flex-direction is explained with an example.
Flex-wrap —
By default what happens, all the flex items will try to fit onto one line. We can change that and allow the items to wrap by using the flex-wrap property.
- nowrap — (default value) 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.
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
On CodePly editor, check out this ply LINK where the concept of flex-direction is explained with an example.
Align Items —
The align-items CSS property defines the default behaviour for how the flex items are laid out along the cross-axis on the current line. It basically controls the alignment of items on the cross axis.
- stretch — (default value) Stretch to fill the container
- flex-start — Items are placed at the start of the cross axis.
- flex-end — Items are placed at the end of the cross axis.
- center — Items are centered in the cross axis.
- baseline — Items are aligned such that their baseline aligns.
flex-items: flex-start;
flex-items: flex-end;
flex-items: center;
flex-items: baseline;
flex-items: stretch;
On CodePly editor, check out this ply LINK where the concept of flex-direction is explained with an example.
Justify Content —
The justify-content CSS property defines the alignment along the main axis. It actually helps to distribute space between and around content items along the main axis of a flex container.
- flex-start — (default value) Items are packed towards the start of the flex-direction.
- center — Items are positioned in the center of the container.
- flex-end — Items are packed towards the end of the flex direction.
- space between — Items will have space between them.
- space-around — Items have space before, between, and after them.
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
On CodePly editor, check out this ply LINK where the concept of flex-direction is explained with an example.
Align Content —
The align-content CSS property is similar to align-items, but instead of aligning flex items, it aligns flex lines. This property sets the distribution of space between and around content items along a flexbox’s cross axis.
- stretch — (default value) Lines stretch to take up the remaining space.
- flex-start — Lines are packed towards the start of the flex container.
- center — Lines are packed towards the center of the flex container.
- flex-end — Lines are packed towards the end of the flex container.
- space between — Lines are evenly distributed in the flex container.
- space-around — Lines are evenly distributed in the flex container, with half-spaces on either end.
align-content: stretch;
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
On CodePly editor, check out this ply LINK where the concept of flex-direction is explained with an example.
Flex-grow —
The flex-grow CSS property specifies how much the item will grow relative to the rest of the items inside the same container. It accepts as a unitless value that serves as a proportion. Negative numbers are invalid.
number specifies how much the item will grow relative to the rest of the elements. The default value is 0.
flex-grow: 0;
flex-grow: 1;
flex-grow: 2;
On CodePly editor, check out this ply LINK where the concept of flex-direction is explained with an example.
Flex-shrink —
The flex-shrink specifies how the item will shrink relative to the rest of the flexible items inside the same container. This property defines the ability of a flex item to shrink if necessary.
number specifies how much the item will shrink relative to the rest of the elements. The default value is 1.
flex-shrink: 0;
flex-shrink: 1;
flex-shrink: 2;
On CodePly editor, check out this ply LINK where the concept of flex-direction is explained with an example.
After understanding all the above properties, one must try out to build some layouts using the flex model. Other resources which are really helpful to dive deeper into other CSS concepts — MDN Docs and CSS Tricks website.
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
