What is the difference between display:inline-flex and display:flex in CSS ?
Last Updated :
10 Apr, 2023
In this article, we will see the display property & its values, i.e. the inline-flex & flex, in order to specify the display behavior of an element, along with understanding their basic differences & will illustrate them through the examples.
Both CSS display: inline-flex and display: flex properties are used to create flexible layouts.
The display: inline-flex property will make the element a flexbox container and the container will be inline. They can adjust their size. The items inside the container are also inline. The display: flex property will make the items of the container inline but the container will block the whole row. The items in the container can adjust their size.
Â
Syntax:Â
display: value;
Example 1: The following example shows a case that does not use the display property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS Display property</ title >
< style >
.item1 {
height: 80px;
width: 150px;
background: teal;
display: block;
}
.item2 {
height: 80px;
width: 150px;
background: cyan;
display: block;
}
.item3 {
height: 80px;
width: 150px;
background: green;
display: block;
}
#heading {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 20px;
margin-top: 5px;
}
#sub-heading {
margin-left: 35px;
}
.container {
margin: 50px;
text-align: center;
}
</ style >
</ head >
< body >
< div id = "heading" >GeeksforGeeks</ div >
< h3 id = "sub-heading" >Display properties</ h3 >
< div class = "container" >
< div class = "item1" >Box 1 </ div >
< div class = "item2" >Box 2</ div >
< div class = "item3" >Box 3</ div >
</ div >
< div class = "container" >
< div class = "item1" >Box 1 </ div >
< div class = "item2" >Box 2</ div >
< div class = "item3" >Box 3</ div >
</ div >
</ body >
</ html >
|
Output:
Â
Example 2: The following code demonstrates the display: flex property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS Display property</ title >
< style >
.item1 {
height: 80px;
width: 150px;
background: teal;
display: block;
}
.item2 {
height: 80px;
width: 150px;
background: cyan;
display: block;
}
.item3 {
height: 80px;
width: 150px;
background: green;
display: block;
}
#heading {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 130px;
}
#sub-heading {
margin-left: 180px;
}
.container {
margin: 50px;
text-align: center;
display: flex;
}
</ style >
</ head >
< body >
< div id = "heading" >GeeksforGeeks</ div >
< h3 id = "sub-heading" >Display properties</ h3 >
< div class = "container" >
< div class = "item1" >Box 1 </ div >
< div class = "item2" >Box 2</ div >
< div class = "item3" >Box 3</ div >
</ div >
< div class = "container" >
< div class = "item1" >Box 1 </ div >
< div class = "item2" >Box 2</ div >
< div class = "item3" >Box 3</ div >
</ div >
</ body >
</ html >
|
Output:
Â
Example 3: The following code demonstrates the display: inline-flex property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS Display property</ title >
< style >
.item1 {
height: 80px;
width: 150px;
background: teal;
display: block;
}
.item2 {
height: 80px;
width: 150px;
background: cyan;
display: block;
}
.item3 {
height: 80px;
width: 150px;
background: green;
display: block;
}
#heading {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 400px;
}
#sub-heading {
margin-left: 470px;
}
.container {
margin: 50px;
text-align: center;
display: inline-flex;
}
</ style >
</ head >
< body >
< div id = "heading" >GeeksforGeeks</ div >
< h3 id = "sub-heading" >Display properties</ h3 >
< div class = "container" >
< div class = "item1" >Box 1 </ div >
< div class = "item2" >Box 2</ div >
< div class = "item3" >Box 3</ div >
</ div >
< div class = "container" >
< div class = "item1" >Box 1 </ div >
< div class = "item2" >Box 2</ div >
< div class = "item3" >Box 3</ div >
</ div >
</ body >
</ html >
|
Output:
Â
Difference between inline-flex and flex:
display: inline-flex |
display: flex |
It behaves like an inline element with respect to the parent element. |
It behaves like a block element with respect to the parent element. |
It only takes up the necessary space required by its content. |
It takes up the full width of its container. |
It sets the cross-axis to vertical by default. |
It can have a vertical or horizontal cross-axis. |
It is commonly used for block-level elements such as buttons, navigation menus, etc. |
It is commonly used for block-level elements such as divs, sections, etc. |
Share your thoughts in the comments
Please Login to comment...