This is a comprehensive article on CSS Flexbox. It explains the CSS Flexbox with both parent and children properties that let us define different possible alignment and presentation of elements. After this, you will be able to make and understand the layout of the page.
This is going to be the long but detailed, complete, and most importantly easiest way possible to understand this great wizard of design. If you have a bathroom to go, just go. After you begin this, sit with the whole mind because this is gonna take some time and you will definitely enjoy it after learning this.
Before starting, if you don’t use your own custom snippet in your IDE, please create your custom snippet to improve productivity.
For Visual Studio Code ( VS Code) users, please follow this link
Now, Let’s Dive –
In designing, there are so many trite requirements that are hard to attain or maybe impossible for non-designer without support. Some of them may be :
- vertical centering of child elements in the parent element.
- making all child elements adjust to equal height regardless of the contents of the individual items.
- making all child elements adjust to equal height or equal width regardless of the height or width available.
You will see in the code and demonstration below, with how convenient this is attainable using flex.
This is a generic code where you can try your hand. While going on and finding new property, try in this code here.
First, determine the items which you want to display as flex and it’s parent element or container. In this tutorial, we are going to point the parent of the items you want to display flex as a flex container whereas elements that are intended to be flexed are flex items.
For a simple and easiest demonstration of flex, let’s start with the parent element where we specify the attributes to the display property.
This property and value are assigned to the container element which contains the flex items. The default value for the display of the div element is block.
For flex, we set the display property value as flexbox or inline-flex.
With this property, the container is assigned as a flex container and all the default properties are assigned to flex container and corresponding flex items inside it.
The element where this property is assigned determined which elements are supposed to be laid out as flexible boxes.
Now, there are multiple properties that can be assigned and valued to the container and items inside that flex container which change the alienation, size, spacing, and display of the items.
In flexbox, there are two axes –
- Main Axis
- Cross Axis
Everything we do on flex is related to axes, so it is important to understand what they are and how flex works with axes. For aligning and justifying flex items, understanding the axes is very important.
The flex-direction value defines the main axis and is placed in a flex container. Flex can have flow in a single direction so it can be either in a horizontal row or in a vertical column.
The main-axis value can be any of the four possible values i.e:
For the value of row or row-reverse, the main-axis will run or flex-item will flow along in horizontal direction. The value or items of the column or column-reverse are flexed along the column or vertical axis.
- The row is default and direction is right to left whereas row-reverse is in right to left.
- The column is from top to bottom while column-reverse is from bottom to top
This flow direction is more comfortable than the previous writing mode of the document in which the initial assumption is from left to right.
While the axis perpendicular to the main axis is a cross axis.
Understanding axes and flow is important to get handy with aligning and justifying skills.
When we added two more elements in the flex item, the items shrank and fitted on that row. This is because of default flex properties.
This is because of the absence of wrap in the default properties.
Flex-wrap property defines whether the flex-items are limited into a single row or they can wrap into multiple lines. The value of this property defines the direction in which the list items are wrapped.
Possible values of this property are:
- nowrap (default value)
This is default value so if you don’t define this property, flex takes this as a default value for flex-wrap. It defines the wrap in which flex-items are rendered in a single line and may cause an overflow. In figure 2(a), it is the default value which is adjusting the lists in a single line.
wrap and wrap-reverse:
This value allows flex items to break into multiple lines.
Flex-flow is shorthand and a combination of flex-direction and flex-wrap. It accepts two values of which first is flex-direction and the second value is flex-wrap.
justify-content property defines the flex-items’ alignment on the main axis which is x-axis for row and y-axis for column flex-direction. This defines how space is distributed between and around the flex-items.
The default value is flex-start.
There are so many values that are possible which can be seen listed in image 3 (b). Here we will talk about the most used value :
this value flexes the flex-items/children from the start. It can be visualized as float left for flow right.
This aligns the children from the end. It can be visualized as float right for flow row.
Items are flexed at the center of the main axis.
In this, the remaining space is distributed between the items. The first item starts from the start and the last element ends at the end.
In this, remaining space is distributed between items as well as around items so this will add space before the first element and after the last element. In the image below we can see element 1 has space before it and element 5 is also not at the end rather a space from 5 to end exist or in other words, there is space around children.
In this, all items have equal space around them so you can see there is no equal space on both sides of all items. Items 2,3 and 4 have equal space on both sides but first and last items have half of space between items. It’s because for items 1 and 2, spacing is from start edge to item 1 i.e space of unit one. Similarly, this applies to item 5 end space also. While for space between 1 and 2 it is space which is the sum of space to the right side of 1 and left side of 2.So space between 1-2, 2-3, 3-4, and 4-5 are two units.
In this, items are distributed with equal space. This can be clearly understood with the image below.
Summation of all those options and demonstration:
This defines how items are aligned in the container’s cross-axis i.e perpendicular to the main axis. In a horizontal flexbox layout, horizontal flow is the main axis whereas vertical flow is cross axes.
This property is useless unless you have multiple lines of flex items.
Speaking frankly, one of the reasons I love flex is because of this easy to use property which enables vertical alignment, more importantly, center positioning.
line stretch to take up the remaining space.
flex items are aligned from the start of the container.
flex items are aligned from the end of the containers.
I think from these two images fig 4 (c) and fig 4(d) above, these two properties are clear.
flex items are centered on the cross axis.
flex items are aligned with equal space distribution of free space between the horizontal line ( in this case because the cross axis is vertical in the above example).
Flex-items are aligned in the vertical axis with equal space around them and the space between the line’s lesser between the edge and the first line is similar to that in justify-content.
These are the properties applied to the flex containers. Listing these, properties that are assigned to flex-container are:
These properties were to be assigned to the parent container. Now we will go into children or flex items which help us to make a change to make change the default value.
The first interesting thing is the order of items.
The default value is zero. This means, by default items are layout in order in which they exist in code. This feature allows us to change the order of rendering of flex-items. This is a very useful feature that cannot be attained with this ease in conventional layout practices.
the value assigned in order property determines the order in which elements are presented. Element with the same value are presented in the order they are originally in source code.
Element with the lowest value appears first in the web and items with a higher value will appear later than that with a lower value.
In the code above though item item1 is present earlier, the order properties change the appearance order. So element item2 appears before item1.
You can set negative order values to make items appear earlier than items with 0 set.
This defines how much flex items can grow if necessary. It takes a positive value which is unitless because this is proportion.
This is regarding the free space that item can occupy.
The default value is 0.
Don’t forget that this value is proportion. So, setting the value of all items 4 or setting all items value 1 is the same, and both mean that all items occupy equal space.
Suppose, one item has a value of 2 and there are other three elements with an equal value of 1. The available space of the container is 80px. What will be the free space that the first element can occupy?
Answer is 20px. The first element can occupy 40px while the other two can take equal 20px and 20px .
This is also a unitless proportional value like flex-grow. It is useful when items overflow from the container and this value defines how much each item compensates their width in order to compensate overflow.
The default value is 1.
flex-basis property value defines the initial size of flex items. The default value is auto which means ” look at my height and width property “.
Always remember flex-basis has higher precedence over items height or height for flex-basis other than auto because in auto both are the same.
<width> can take the absolute value of length or percentage of the size of the main container or auto keyword.
content means automatic sizing of an item according to the contents in those items.
flex basis can have zero ( 0 ) value. It does not mean that item will collapse because the setting value to zero does not mean setting width 0px.
In this case of zero flex-basis, flex-basis is overridden by flex-grow. The best and clear demonstration can be presented by the image by https://www.w3.org/
In the image above, flex-grow of three items is valued 1, 1, and 2 individually. This is clear from fig 7 (a) that space distribution is not the same in two cases.
Let’s decode :
in flex-basis: 0, as I said, flex-basis is overridden by flex-grow. In this free space is not factored. Whereas in flex-basis: auto, the initial size of the item is determined according to their initial size and extra free space is factored which can be seen in fig 7(a). In auto, space is distributed according to the flex-grow value assigned so free space in the last item is double that of first and second.
It is shorthand of properties flex-grow, flex-shrink, and flex-basis in this order. The default value of flex is 1 0 auto. The second and third parameters are optional.
- flex: 0 auto; mean flex:initial or flex: 0 1 auto which is a default value. This makes flex inflexible since flex items cannot grow on free space but can shrink on overflow.
- flex: auto; means flex: 1 1 auto;
- flex: none; mean flex: 0 0 auto; This makes items completely inflexible i.e neither they can grow nor they can shrink on necessity.
- if the flex has a single value like flex: 1, we understand that it is flex-grow.
- if flex has a single value like flex:250px, we understand that it is flex-basis.
- if flex has two values like flex: 1 250px, we understand these are flex-grow and flex-basis.
- if flex has two values like flex: 2 3, we understand these are flex-grow and flex-shrink.
align-self is align-items for flex-items. This means that this attribute overrides the align-items property in a container for that flex-item.
It is used separately to an individual item that you need to reposition.
This is a comprehensive detail of the flexbox. In the next article, we will be designing a website component using a flexbox.
Happy Learning !!!
Happy Coding !!!!
Stay Safe and Take care. Help others in need.
Bye for now, See you again in the next article. Subscribe to my newsletter so that you could be notified with mail when I publish a new interesting and comprehensive article.