Skip to main content
Hashnodeshobhit sheta's blog

Command Palette

Search for a command to run...

All About Flexbox

Updated
•6 min read
All About Flexbox
S
shobhit sheta

Flexbox

Display

Display: flex

The flex container becomes flexible by setting the display property to flex.

  • Example:

    *HTML

    <div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>  
</div>

    CSS

    #mymain {
height: 100px;
display: flex;
}
#mymain div {
padding:5px;
}
https://codepen.io/shobhitsheta/full/GRxYPVg

Display: inline-flex

Displays an element as an inline-level flex container.

Flex-direction

flex-direction: row

The flexible items are displayed horizontally, as a row.

  • Example:

    HTML

    <div id="mymain">
<div style="background-color:coral;">red div</div>
<div style="background-color:lightblue;">blue div</div>
<div style="background-color:khaki;">yellow div</div>
<div style="background-color:pink;">pink div</div>
</div>

    CSS

    #mymain {
height: 100px;
display: flex;
flex-direction: row;
}
#mymain div {
padding:5px;
}
https://codepen.io/shobhitsheta/full/OJvBdyX

flex-direction: row-reverse

Same as row, but in reverse order.

  • Example:

    HTML

    <div id="mymain">
<div style="background-color:coral;">red div</div>
<div style="background-color:lightblue;">blue div</div>
<div style="background-color:khaki;">yellow div</div>
<div style="background-color:pink;">pink div</div>
</div>

    CSS

    #mymain {
height: 100px;
display: flex;
flex-direction: row-reverse;
}
#mymain div {
padding:5px;
}
https://codepen.io/shobhitsheta/full/GRxYzop

flex-direction: column

The flexible items are displayed vertically, as a column.

  • Example:

    HTML

    <div id="mymain">
<div style="background-color:coral;">red div</div>
<div style="background-color:lightblue;">blue div</div>
<div style="background-color:khaki;">yellow div</div>
<div style="background-color:pink;">pink div</div>
</div>

    CSS

    #mymain {
height: 100px;
display: flex;
flex-direction: column;
}
#mymain div {
padding:5px;
}
https://codepen.io/shobhitsheta/full/jOzedqL

flex-direction: column-reverse

Same as column, but in reverse order.

  • Example:

    HTML

    <div id="mymain">
<div style="background-color:coral;">red div</div>
<div style="background-color:lightblue;">blue div</div>
<div style="background-color:khaki;">yellow div</div>
<div style="background-color:pink;">pink div</div>
</div>

    CSS

    #mymain {
height: 100px;
display: flex;
flex-direction: column-reverse;
}
#mymain div {
padding:5px;
}
https://codepen.io/shobhitsheta/full/poLxGbp

Flex-wrap

flex-wrap: nowrap

Default value. Specifies that the flexible items will not wrap.

  • Example:

    HTML

    
 <div id="mymain">
<div style="background-color:coral;">red div</div>
<div style="background-color:lightblue;">blue div</div>
<div style="background-color:khaki;">yellow div</div>
<div style="background-color:pink;">pink div</div>
</div>

    CSS

    #mymain {
width:100%;
height: 100px;
display: flex;
flex-wrap: nowrap;
}
https://codepen.io/shobhitsheta/pen/qBoJgGd

flex-wrap: wrap

Specifies that the flexible items will wrap if necessary.

  • Example:

    HTML

    <div id="myDIV">
<div id="mymain">
<div style="background-color:coral;">red div</div>
<div style="background-color:lightblue;">blue div</div>
<div style="background-color:khaki;">yellow div</div>
<div style="background-color:pink;">pink div</div>
</div>
</div>

    CSS

    #myDIV {
width:200px;
height:300px;
background-color:#FFFFFF;
}
#mymain {
width:100%;
height: 100px;
display: flex;
flex-wrap:wrap;
}
https://codepen.io/shobhitsheta/full/ZExqZMJ

flex-wrap: wrap-reverse

Specifies that the flexible items will wrap, if necessary, in reverse order.

  • Example:

    HTML

    <div id="myDIV">
<div id="mymain">
<div style="background-color:coral;">red div</div>
<div style="background-color:lightblue;">blue div</div>
<div style="background-color:khaki;">yellow div</div>
<div style="background-color:pink;">pink div</div>
</div>
</div>

    CSS

    #myDIV {
width:200px;
height:300px;
background-color:#FFFFFF;
}
#mymain {
width:100%;
height: 100px;
display: flex;
flex-wrap:wrap-reverse;
}
https://codepen.io/shobhitsheta/full/bGvmJQE

Justify-content

  • Align-items works horizontal line (X-axis).

justify-content: flex-start

Default value. Items are positioned at the beginning of the container.

  • Example:

    HTML

    
 <div id="myDIV">
<div style='background-color:coral;'></div>
<div style='background-color:lightblue;'></div>
<div style='background-color:pink;'></div>
</div>

    CSS

    #myDIV {
height:300px;
background-color:#FFFFFF;
display: flex;
justify-content: flex-start;
}
#myDIV div {
width: 80px;
height: 80px; 
}
https://codepen.io/shobhitsheta/live/mdxzggb

justify-content: flex-end

Items are positioned at the end of the container.

  • Example:

    HTML

    
 <div id="myDIV">
<div style='background-color:coral;'></div>
<div style='background-color:lightblue;'></div>
<div style='background-color: pink;'></div>
</div>

    CSS

    #myDIV {
height:300px;
background-color:#FFFFFF;
display: flex;
justify-content: flex-end;
}
#myDIV div {
width: 80px;
height: 80px; 
}
https://codepen.io/shobhitsheta/full/ExEdJzR

justify-content: center

Items are positioned in the center of the container.

  • Example:

    HTML

    
 <div id="myDIV">
<div style='background-color:coral;'></div>
<div style='background-color:lightblue;'></div>
<div style='background-color:pink;'></div>
</div>

    CSS

    #myDIV {
height:300px;
background-color:#FFFFFF;
display: flex;
justify-content: center;
}
#myDIV div {
width: 80px;
height: 80px; 
}
https://codepen.io/shobhitsheta/full/xxWyeoy

justify-content: space-between

Items will have space between them.

  • Example:

    HTML

    
 <div id="myDIV">
<div style='background-color:coral;'></div>
<div style='background-color:lightblue;'></div>
<div style='background-color:pink;'></div>
</div>

    CSS

    #myDIV {
height:300px;
background-color:#FFFFFF;
display: flex;
justify-content: space-between;
}
#myDIV div {
width: 80px;
height: 80px; 
}
https://codepen.io/shobhitsheta/full/wvmYbwW

justify-content: space-around

Items will have space before, between, and after them.

  • Example:

    HTML

    
 <div id="myDIV">
<div style='background-color:coral;'></div>
<div style='background-color:lightblue;'></div>
<div style='background-color:pink;'></div>
</div>

    CSS

    #myDIV {
height:300px;
background-color:#FFFFFF;
display: flex;
justify-content: space-around;
}
#myDIV div {
width: 80px;
height: 80px; 
}
https://codepen.io/shobhitsheta/full/KKoGLKq

justify-content: space-evenly

Items will have equal space around them.

  • Example:

    HTML

    
 <div id="myDIV">
<div style='background-color:coral;'></div>
<div style='background-color:lightblue;'></div>
<div style='background-color:pink;'></div>
</div>

    CSS

    #myDIV {
height:300px;
background-color:#FFFFFF;
display: flex;
justify-content: space-evenly;
}
#myDIV div {
width: 80px;
height: 80px; 
}
https://codepen.io/shobhitsheta/full/YzaJbzm

Align-items

  • Align-items works vertical line (Y-axis).

align-items: flex-start

Items are positioned at the beginning of the container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>  
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
</div>

    CSS

    #main {
display: flex;
}
#main div {
flex: 1;
border: 1px solid black;
display: flex;
align-items: flex-start;
}
https://codepen.io/shobhitsheta/full/gOeBJwr

align-items: flex-end

Items are positioned at the end of the container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>  
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
</div>

    CSS

    #main {
display: flex;
}
#main div {
flex: 1;
border: 1px solid black;
display: flex;
align-items: flex-end;
}
https://codepen.io/shobhitsheta/full/jOzeoVG

align-items: center

Items are positioned at the center of the container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>  
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
</div>

    CSS

    #main {
display: flex;
}
#main div {
flex: 1;
border: 1px solid black;
display: flex;
align-items: center;
}
https://codepen.io/shobhitsheta/full/yLKRWgv

align-items: baseline

Items are positioned at the baseline of the container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>  
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
</div>

    CSS

    #main {
display: flex;
}
#main div {
flex: 1;
border: 1px solid black;
display: flex;
align-items: baseline;
}
https://codepen.io/shobhitsheta/full/JjLmqWV

align-items: stretch

Items are stretched to fit the container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>  
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
</div>

    CSS

      #main {
display: flex;
}
#main div {
flex: 1;
border: 1px solid black;
display: flex;
align-items: stretch;
}
https://codepen.io/shobhitsheta/full/VwXEOWw

Align-content

align-content: flex-start

Lines are packed toward the start of the flex container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>  
<div style="background-color:lightgreen;">GREEN</div>
</div>

    CSS

    #main {
background-color:#FFFFFF;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
#main div {
width: 100%;
height: 40px; 
}
https://codepen.io/shobhitsheta/full/QWmZRrQ

align-content: flex-end

Lines are packed toward the end of the flex container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>  
<div style="background-color:lightgreen;">GREEN</div>
</div>

    CSS

    #main {
background-color:#FFFFFF;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
#main div {
width: 100%;
height: 40px; 
}
https://codepen.io/shobhitsheta/live/mdxzYGO

align-content: center

Lines are packed toward the center of the flex container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>  
<div style="background-color:lightgreen;">GREEN</div>
</div>

    CSS

    #main {
background-color:#FFFFFF;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
#main div {
width: 100%;
height: 40px; 
}
https://codepen.io/shobhitsheta/full/JjLmqmP

align-content: space-between

Lines are evenly distributed in the flex container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>  
<div style="background-color:lightgreen;">GREEN</div>
</div>

    CSS

    #main {
background-color:#FFFFFF;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
#main div {
width: 100%;
height: 40px; 
}
https://codepen.io/shobhitsheta/full/qBoJGJB

align-content: space-around

Lines are evenly distributed in the flex container, with half-size spaces on either end.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>  
<div style="background-color:lightgreen;">GREEN</div>
</div>

    CSS

    #main {
background-color:#FFFFFF;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
#main div {
width: 100%;
height: 40px; 
}
https://codepen.io/shobhitsheta/full/LYdgogE

align-content: stretch

Items are stretched to fit the container.

  • Example:

    HTML

    
 <div id="main">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>  
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>

    CSS

      #main {
background-color:#FFFFFF;
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
#main div {
width: 100%;
height: 40px; 
}
https://codepen.io/shobhitsheta/full/oNqaRaX

Practice this flexbox concept by playing game

Flexbox Game

#iwritecode#learncodeonline

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

shobhit sheta's blog

7 posts