What is Flexbox?
The flexbox layout provides a convenient and flexible way to layout, align and give space between items in a container. The main idea behind the flex layout is to give the container the ability to alter the order of its items and fill the available space around.
Since flexbox is not a single module it's an entire module, it comes with a whole set of properties that we are going to look at and understand how it works. So, let's begin.
Flexbox Properties
Properties for Parents(flex Container):
the flex container is the parent element in which we define all the parameters for its child element, and how they behave with the container including direction, space and alignment.
display: flex;
This property will define the container element with a value of flex.
Syntax:
.container {
display: flex;
}
flex-direction:
This property will define how flex items will be placed in the flex container whether it is horizontally or vertically direction.
Syntax:
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
row: Flex items will be placed left to right, which is also the default value.row-reverse: Flex items will be placed right to left.column: It is the same as the row but flex items will be placed from top to bottom.column-reverse: It is also the same as row-reverse but flex items will be placed from bottom to top.Now, Let's have a look at how
flex-directionwith all these properties will work with the example:
flex-wrap:
As we know flex items will try to fit into one line. so, to align it properly we can use this property to wrap flex items onto multiple lines.
Syntax:
.container {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap: It is the default value where all flex items will be on one line.wrap: Flex items will wrap around into multiple lines from top to bottom.wrap-reverse: Flex items will wrap around into multiple lines from bottom to top.
Now, Let's have a look at how flex-wrap with all these properties will work with the example:
flex-flow:
This is a shorthand property for the flex-direction and flex-wrap properties, which we can define together. The default value is row nowrap.
With multiple lines approach:
.container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
With flex-flow approach:
.container{
display: flex;
flex-flow: column wrap;
}
justify-content:
This property is used to align flex items along the main axis (horizontal axis). It has some controls over the alignment of items.
Syntax:
.container{
display: flex;
justify-content: flex-start | flex-end | center | space-between | space- around | space-evenly;
}
flex-start: Items are aligned toward the start of the flex direction.flex-end: Items are aligned toward the end of the flex-direction.center: Items are centered along the line.space-between: Items are evenly distributed in the line; the first item is on the start line, and the last item is on the end line.space-around: Items are evenly distributed in the line with equal space around them.space-evenly: Items are distributed so that the spacing between any two items is equal.
Now, Let's have a look at how justify-content with all these properties will work with the example:
align-items:
This property is used to align flex items along the cross-axis(vertical axis).
Syntax:
.container {
display: flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: 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 on the cross-axis.baseline: Items are aligned such as their baselines align.
Now, Let's have a look at how align-items with all these properties will work with the example:
align-content:
When we are dealing with multiple lines of rows or columns then this property is used to align a flex container’s lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main axis.
The align-content the property accepts different values:
stretch: lines stretch to take up the remaining spaceflex-start: Items packed to the start of the container.flex-end: Items packed to the end of the container.center: Items centered in the container.space-between: Items are evenly distributed; the first line is at the start of the container while the last one is at the end.space-around: Items are evenly distributed with equal space around each line.
Now, Let's have a look at how align-content with all these properties will work with the example:
gap, row-gap, column-gap:
The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.
Syntax:
.container {
display: flex;
gap: 10px;
row-gap: 10px;
column-gap: 20px;
}
Properties for Children(flex Items):
order:
The order property specifies the order in which flex items will appear in the flex container.
Syntax:
.item {
order: 1;
}
Now, Let's have a look at how order will work with the example:
flex-grow:
The flex-grow property defines the ability of a flex item to grow concerning other flex items.
syntax:
.item {
flex-grow: 4;
}
Now, Let's have a look at how flex-grow will work with the example:
align-self:
The align-self property is used for aligning the selected item inside the flex container. This property overrides the default alignment set by the container's align-items property.
Syntax:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Now, Let's have a look at how align-self will work with the example:
So far we have covered almost every important property related to flexbox. There is also one website to learn and get your hands dirty with flexbox by simply playing games you can get an actual idea about everything we have seen so far Flexbox Froggy Game .
Thank you reading.