display: flex
A one dimensional layout system (either in rows or columns ,but not in both directions simultaneously.
Items are aligned in main axis (horizontal by default).
These helps to align and distribute space among items in a container.
Properties of display :flex
display: flex; Activates flexbox of the container.
<div class="container">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
<div class="item3">Item3</div>
</div>
*
{
box-sizing: border-box;
margin:0;
padding:0;
}
.container
{
display: flex;
background-color: aquamarine;
padding: 20px;
}
.item1
{
background-color: antiquewhite;
padding: 20px;
}
.item2
{
background-color:rgb(57, 175, 72);
padding: 20px;
}
.item3
{
background-color: lightpink;
padding: 20px;
}
flex-direction:
Defines the direction of the item
row(default) Items are arranged left-to-right
row-reverse
Items are arranged from right-to left
<div class="co">
<div class="item">Item1</div>
<div class="item">Item2</div>
</div>
.co
{
display: flex;
flex-direction: row-reverse;
background-color: antiquewhite;
padding:20px;
}
.item
{
background-color: yellow;
padding: 20px;
}
column:
Items are stacked from top-to-bottom.
<div class="c">
<div class="i">Item1</div>
<div class="i">Item2</div>
</div>
.c
{
display: flex;
flex-direction: column;
background-color: lightcoral;
padding: 20px;
}
.i
{
background-color: lightgrey;
padding:10px;
}
column-reverse
Items are stacked from bottom-to-top
<div class="c">
<div class="item"> Item1 </div>
<div class="item">Item2 </div>
</div>
.c
{
display: flex;
flex-direction: column-reverse;
padding: 20px;
background-color: lightpink;
}
.item
{
background-color: lightskyblue;
padding: 10px;
}
Justify-content
Aligns items horizontally in the container.
flex-start(default):aligns items at the starting
<div class="c">
<div class="i">1</div>
<div class="i">2</div>
<div class="i">3</div>
</div>
.c
{
display: flex;
background-color: yellow;
padding: 20px;
justify-content: flex-start;
}
.i
{
border: 2px solid;
background-color: red;
padding: 10px;
}
flex-end
aligns items at the end
.c
{
display: flex;
background-color: yellow;
padding: 20px;
justify-content: flex-end;
}
.i
{
border: 2px solid;
background-color: red;
padding: 10px;
}
center : Items are centered
.c
{
display: flex;
background-color: yellow;
padding: 20px;
justify-content: center;
}
.i
{
border: 2px solid;
background-color: red;
padding: 10px;
}
space-between
Items are spaced out with equal space between them.
justify-content: space-between;
space-around
Items have equal space around them.
justify-content: space-around;
space-evenly
Items have equal space between and around them.
align-items
align items vertically in the container.
stretch(default)
Items stretched to fill the container.
.c
{
display: flex;
background-color: yellow;
height:90px;
align-items: stretch;
}
.i
{
border: 5px solid rgb(167, 30, 246);
background-color: red;
padding: 10px;
border-radius: 50px;
}
flex-start
Items align at the top
.c
{
display: flex;
background-color: yellow;
height:90px;
align-items:flex-start
}
.i
{
border: 5px solid rgb(167, 30, 246);
background-color: red;
padding: 10px;
border-radius: 50px;
}
flex-end
align items at the bottom.
.c
{
display: flex;
background-color: yellow;
height:90px;
align-items:flex-end;
}
.i
{
border: 5px solid rgb(167, 30, 246);
background-color: red;
padding: 10px;
border-radius: 50px;
}
center
Items are centered vertically.
align-items:center;
baseline
Items align based on their text’s baseline.
flex-wrap:
These flex-wrap property controls whether the items inside a flex container should wrap onto the next line when there isn’t enough space in a single line.
By default items are arranged in a single line but flex-wrap can change this behavior.
nowrap(default)
All flex items are placed on a single line no matter how space is available .If the content overflows the container .It will not wrap to the next line.
All items are forced to stay in the single line, even if they overflow the container.
<div style="display: flex; flex-wrap: nowrap; background: lightgray; width: 400px; padding: 10px; border: 1px solid black;">
<div style="background: coral; padding: 20px; width: 150px;">Item 1</div>
<div style="background: lightgreen; padding: 20px; width: 150px;">Item 2</div>
<div style="background: lightblue; padding: 20px; width: 250px;">Item 3</div>
</div>
Here the items are forced to stay in the single line
container width:400px
Total item’s width:150px +150px + 250px=550px;
wrap
Items wrap on the next line when they can’t fit in the container.
<div style="display: flex; flex-wrap: wrap; background: lightgray; width: 400px; padding: 10px; border: 1px solid black;">
<div style="background: coral; padding: 20px; width: 150px;">Item 1</div>
<div style="background: lightgreen; padding: 20px; width: 150px;">Item 2</div>
<div style="background: lightblue; padding: 20px; width: 250px;">Item 3</div>
</div>
Here the item 3 comes in the next line as it is out the space.
wrap-reverse
<div style="display: flex; flex-wrap: wrap-reverse; background: lightgray; width: 400px; padding: 10px; border: 1px solid black;">
<div style="background: coral; padding: 20px; width: 150px;">Item 1</div>
<div style="background: lightgreen; padding: 20px; width: 150px;">Item 2</div>
<div style="background: lightblue; padding: 20px; width: 250px;">Item 3</div>
</div>
flex items onto the next line in reverse order.
align-content
controls the alignment of a multi-line flex container. works only when flex: wrap; is applied and there are multiple rows.
stretch(default)
Flex lines are stretched along the cross-axis.
flex-start
All lines are packed at the start of the container along the cross-axis(vertical direction).
flex-end
All lines are packed at the end of the container along the cross-axis.
center
All lines are packed at the center of the cross-axis.
space-between
Lines are equally distributed with equal spaces between them .There is no space at the start or end.
space-around
Lines are distributed with equal spaces around them including at the edges of the container.
align-self
Overrides the align-items property for individual items.
auto(default)
The items inherit the properties of the align-items.
flex-start
Item align at the top
<div style="display: flex; align-items: stretch; height: 150px; background: lightgray;">
<div style="background: coral; padding: 10px;">Item 1</div>
<div style="background: lightgreen; padding: 10px; align-self:flex-start">Item 2</div>
<div style="background: lightpink; padding: 10px;">Item 3</div>
</div>
The second item is moved to the top
flex-end
Item is align at the bottom.
center
Item is aligned centered vertically.
Advanced Flexbox Concepts:
order
By default all items have order:0
Lower values appear first.
If two items have the same order value, their position is determined by their original order in HTML.
<div style="display: flex; gap: 10px;">
<div style="background: coral; padding: 20px; order: 3;">Item 1</div>
<div style="background: lightgreen; padding: 20px; order: 1;">Item 2</div>
<div style="background: lightblue; padding: 20px; order: 2;">Item 3</div>
</div>
here the representation will be Item2 Item3 Item1
flex-grow
The flex grow determines how much flex item can grow relative to others when there is a space in the container.
<div style="display: flex; gap: 10px;">
<div style="background: coral; flex-grow: 1;">Item 1</div>
<div style="background: lightgreen; flex-grow: 2;">Item 2</div>
<div style="background: lightblue; flex-grow: 1;">Item 3</div>
</div>
here item2 takes the two times of item1 and item3.
flex-shrink
These property determines how much a flex item can shrink relative to others when there is no space.
flex-basis
flex-basis sets the the size of the item before the item growing or shrinking
………………………………………... Thank you………………………………………