Table of contents
Before the introduction of flexbox, developers struggle to layout the items on the webpage. To just place the items in center of the webpage, developers struggles. So, to ease the struggle, developers introduce flexbox in keeping in mind that the properties should be simple such that to align the item in center it should be simply center. Let’s understand the flexbox.
Flexbox
Flexbox short form of Flexible Box module. Flexbox is a property used by CSS to align and distribute the items on the webpage. It provide the simple way to layout, align and distribute space among the items in the container; even if the item’s length or width is unknown.
Main idea behind the use of flexbox, is to control the size, height or width of the items that are present in the flex container. Flex container can expand the items to fill the space in the container or shrink the items to prevent from overflowing.
Flexbox’s Basic
Flexbox is a module which is set for the whole container and not for single properties. It contains many different properties within it. Some properties of flexbox are applied to container (parent element, also know as flex-container) and some properties are applied to its items / child (flex-child).
Let’s take a look at the diagram of flexbox.
Items in the flex-container are place on either horizontal direction (main-axis) or vertical direction (cross-axis). Let’s understand the basic terminologies of flexbox.
main axis : It is the primary axis of the flexbox on which items are laid out. But main axis is not necessarily in horizontal direction. The direction of the main axis is determined by flex-direction (property of flexbox which is discussed below).
main start and main end: From where the main axis starts and main axis ends. The items are placed between them.
main size : The total size of main axis from the main start and main end.
cross axis : It is the secondary axis of the flexbox on which the items are laid out. Like main axis, the cross axis is not always in vertical direction and it’s direction is determined by the flex-direction.
cross start and cross end : From where the cross axis starts and cross axis ends. The items are laid out between the cross start and cross end.
cross size : The total size of cross axis from the cross start and cross end.
Properties of Flexbox
Properties applied to flex-container :
display :
The display property is used on the container to make its items flexible. To use any other property of the flexbox, the container must be in flex.
Note that CSS columns have no effect on a flex container.
flex-direction :
The flex-direction property controls the direction of the main and cross axes in a flexbox, allowing flex items to be arranged in either horizontal rows or vertical columns.
row : This is the default value of flex-direction. main axis and the items are laid out from left to right.
row-reverse : The items are laid out from right to left.
column : The items are laid out from top to bottom.
column-reverse : The items are laid from bottom to top.
justify-content :
The justify-content property is used to distribute space around and between items along the main axis of a flex container.
flex-start : Used to align the items toward the beginning of the flex-direction.
flex-end : Used to align the items toward the end of the flex-direction.
center : Used to align the items at the center of main axis.
space-around : Used to distribute the items along the main axis with equal spacing. Visually, the space between two items are not equal.
space-between : Used to distribute the items with equal space between them, first item at the starting and last item at the ending of the flexbox.
space-evenly : Used to distribute the items so that the space between them (and space between edges and items) are equal.
align-items :
This is used to manipulate the behavior of items that are laid out on cross axis.
stretch : This is the default value of align-items. Used to stretch the items to fill the container.
flex-start : Used to place the items at the start of cross axis.
flex-end : Used to place the items at the end of cross axis.
center : Used to place the items at the center of cross axis.
baseline : Used to align the items in such a way that their baselines align.
align-content :
This is used to set how space is distributed between and around items in a flex container along the cross axis.
flex-start / start : Used to pack the items at the start of container along the cross axis. The (more supported)
flex-starthonors theflex-directionwhilestarthonors thewriting-modedirection.flex-end / end : Used to pack the items at the end of container along the cross axis. The (more support)
flex-endhonors theflex-directionwhile end honors thewriting-modedirection.center : items centered in the container.
stretch : Used to stretch the lines between the items to make up the remaining space.
space-between : Used to distribute the item line evenly. First line at the start of container and last line at the end of container.
space-around : Items are evenly distributed with equal space around the lines.
space-evenly : Items are evenly distributed with equal space between the lines.
gap, row-gap, column-gap :
The gap property is used to control the gap between the flex items of container. It is only applies to the space between the items and not the space outer edges.
flex-wrap :
Without the flex-wrap, the items of the container want to fit in the one line. With this property, we can change it and allow the items to wrap meaning the items can move to multipe line if there is no space left.
nowrap : This is the default value of flex-wrap. All the items are in single line
wrap : allow the items to move to multiple line if no space available from top to bottom
wrap-reverse : flex items will wrap to multiple lines from bottom to top.
flex-flow :
This is the combination of flex-direction and flex-wrap, which together define the flex container’s main and cross axes. The default value is row nowrap.
Properties applied to flex-items
order :
By default, the value of order for all items is 0. It is used if we want some items to be place in some order.
Higher the order value, lower the position of item.
flex-grow :
It defines the space that will be used by a item in the container and ability to grow if necessary. If the value of flex-grow is 1 then all items grow evenly and if flex-grow’s value is 2 for one of the item the it will take twice as much space as other items and grow twice as fast than others.
Negative values are invalid.
flex-shrink :
It is the ability of flex-item to shrink.
Negative values are invalid.
align-self :
This is used by single item to override the overall alignment.
This is the same as align-items but it is for a single item.
flex :
This is the shorthand of flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto.
Conclusion
Flexbox is crucial to learn in CSS. If you want the items to align easily, flexbox is used. Some properties are somewhat confusing, but if you practice enough, they will become easy to understand and you will start the understand where to use these properties and how to use.