It is also called a flexible box model. It is basically a layout model that provides an easy and clean way to arrange items within a container. Flexbox is different from the block model which is vertically bias and the inline which is horizontally bias. Flexbox was created for small-scale layouts and there’s another standard called grids which is geared more toward larger-scale layouts, It works similarly to the way to Twitter bootstrap grid system works. Flexbox is responsive and mobile-friendly. To start with Flexbox first create a flex container. To create a flex container set the display property to flex.
Example:
.main-container {
display: flex;
}
Flex Properties:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction: The flex-direction is used to define the direction of a flexible item. The default axis is horizontal in Flexbox, so the items flow into a row.
Syntax:
// Stacking flex items column wise
flex-direction: column;
// Stacking flex items from bottom to top
flex-direction: column-reverse;
// Stacking flex items row wise
flex-direction: row;
// Stacking flex items from right to left
flex-direction: row-reverse;
Example: This example shows the use of css flexbox property.
<!DOCTYPE html> < html >
< head >
< title >flexbox</ title >
< style >
.gfg_flex {
display: flex;
flex-direction: row;
background-color: green;
text-align: center;
}
.gfg_flex>div {
background-color: #f4f4f4;
width: 100px;
height: 100px;
margin: 10px;
font-size: 40px;
}
h2 {
text-align: center;
}
.geeks {
font-size: 40px;
text-align: center;
color: #009900;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "geeks" >GeeksforGeeks</ div >
< h2 >flex-direction Property</ h2 >
< div class = "gfg_flex" >
< div >Box A</ div >
< div >Box B</ div >
< div >Box C</ div >
< div >Box D</ div >
< div >Box E</ div >
</ div >
</ body >
</ html >
|
Output:
Syntax:
// Wrap flex items when necessary
flex-wrap: wrap;
// Flex items will not wrap
flex-wrap: nowrap;
Example: This example shows the use of css flexbox property.
<!DOCTYPE html> < html >
< head >
< title >flex-wrap property</ title >
< style >
.gfg_flex {
display: flex;
flex-wrap: wrap;
text-align: center;
background-color: green;
}
.gfg_flex>div {
background-color: #f4f4f4;
width: 100px;
height: 100px;
margin: 10px;
font-size: 40px;
}
h2 {
text-align: center;
}
.geeks {
font-size: 40px;
text-align: center;
color: #009900;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "geeks" >GeeksforGeeks</ div >
< h2 >flex-wrap Property</ h2 >
< div class = "gfg_flex" >
< div >Box A</ div >
< div >Box B</ div >
< div >Box C</ div >
< div >Box D</ div >
< div >Box E</ div >
< div >Box F</ div >
< div >Box G</ div >
< div >Box H</ div >
< div >Box I</ div >
</ div >
</ body >
</ html >
|
Output:
Syntax:
flex-flow: row wrap;
justify-content: The justify-content property is used to align the flex items according to the main axis within a flexbox container.
Syntax:
// Aligns the flex items at the center
justify-content: center;
// The space is distributed around the flexbox items
//and it also adds space before the first item and after the last one.
justify-content: space-around;
// Space between the lines
justify-content: space-between;
// Aligns the flex items at the beginning of the container
justify-content: flex-start;
// Aligns the flex items at the end of the container
justify-content: flex-end;
Example: This example shows the use of css flexbox property.
<!DOCTYPE html> < html >
< head >
< title >justify flexbox property</ title >
< style >
.flex1 {
display: flex;
justify-content: center;
background-color: green;
}
.flex2 {
display: flex;
justify-content: space-around;
background-color: green;
}
.flex3 {
display: flex;
justify-content: space-between;
background-color: green;
}
.flex4 {
display: flex;
justify-content: flex-start;
background-color: green;
}
.flex5 {
display: flex;
justify-content: flex-end;
background-color: green;
}
.flex-items {
background-color: #f4f4f4;
width: 100px;
height: 50px;
margin: 10px;
text-align: center;
font-size: 40px;
}
h2 {
text-align: center;
}
.geeks {
font-size: 40px;
text-align: center;
color: #009900;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "geeks" >GeeksforGeeks</ div >
< h2 >The justify-content Property</ h2 >
< b >justify-content: center </ b >
< div class = "flex1" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >justify-content: space-around </ b >
< div class = "flex2" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >justify-content: space-between </ b >
< div class = "flex3" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >justify-content: flex-start </ b >
< div class = "flex4" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >justify-content: flex-end </ b >
< div class = "flex5" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
</ body >
</ html >
|
Output:
Syntax:
// Aligns the flex items in the middle of the container
align-items: center;
// Flexbox items are aligned at the baseline of the cross axis
align-items: baseline;
// Stretches the flex items
align-items: stretch;
// Aligns the flex items at the top of the container
align-items: flex-start;
// Aligns elements at the bottom of the container
align-items: flex-end;
Example: This example shows the use of css flexbox property.
<!DOCTYPE html> < html >
< head >
< title >align-items property</ title >
< style >
.flex1 {
display: flex;
height: 200px;
align-items: center;
background-color: green;
}
.flex2 {
display: flex;
height: 200px;
align-items: baseline;
background-color: green;
}
.flex3 {
display: flex;
height: 200px;
align-items: stretch;
background-color: green;
}
.flex4 {
display: flex;
height: 200px;
align-items: flex-start;
background-color: green;
}
.flex5 {
display: flex;
height: 200px;
align-items: flex-end;
background-color: green;
}
.flex-items {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align: center;
}
.geeks {
font-size: 40px;
text-align: center;
color: #009900;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "geeks" >GeeksforGeeks</ div >
< h2 >The align-items Property</ h2 >
< b >align-items: center </ b >
< div class = "flex1" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >align-items: baseline </ b >
< div class = "flex2" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >align-items: stretch </ b >
< div class = "flex3" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >align-items: flex-start </ b >
< div class = "flex4" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
< br >
< b >align-items: flex-end </ b >
< div class = "flex5" >
< div class = "flex-items" >1</ div >
< div class = "flex-items" >2</ div >
< div class = "flex-items" >3</ div >
</ div >
</ body >
</ html >
|
Output:
Syntax :
// Displays the flex lines with equal space between them
align-content: space-between;
// Displays the flex lines at the start of the container
align-content: flex-start;
// Displays the flex lines at the end of the container
align-content: flex-end;
// Dy using space-around property space will be
// Distributed equally around the flex lines
align-content: space-around;
// Stretches the flex lines
align-content: stretch;
Example: This example shows the use of css flexbox property.
<!DOCTYPE html> < html >
< head >
< title >align-content property</ title >
< style >
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align: center;
}
.geeks {
font-size: 40px;
text-align: center;
color: #009900;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "geeks" >GeeksforGeeks</ div >
< h2 >The align-content Property</ h2 >
< div class = "main-container" >
< div >1</ div >
< div >2</ div >
< div >3</ div >
< div >4</ div >
< div >5</ div >
< div >6</ div >
< div >7</ div >
< div >8</ div >
< div >9</ div >
< div >10</ div >
</ div >
</ body >
</ html >
|
Output: