Mon. Mar 20th, 2023
HTML & CSS

CSS Basics: What is flex box?

By Muhammad Tanveer Dec 6, 2021

Name show that flexes box means flexible and box .it is a one-proportional layout way for adding out items in rows and columns. It is a good method to line up items into a container. Flex box layout is a proper substitute of float layout

 Flex-directions: ( property related to container not for items.)

Flex-directions have four values

  • row
  • row-reverse
  • column
  • column-reverse

Flex-direction: row

                                  Row is a default value if you use or not use them not having any impact, Order of items in row direction is Left to Right.

Example:

 Flex-directions: ( property related to container not for items.)
<style>
    .container {
        height: 100px;
        width: 40%;
        border: 1px solid black;
        margin: auto;
        background-color: burlywood;
        display: flex;
        flex-direction: row;
    }
    .item {
        height: 50px;
        width: 20%;
        margin-top: 20px;
        font-size: 40px;
        color:black;
        text-align: center;
    }
.item1 {background-color:green;}
    .item2 {background-color: magenta;}
    .item3 {background-color:cyan}
</style>

<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

Flex-direction: (row-reverse)

The direction of row-reverse is opposite of row value – the order of items of is Right to Left.

Example:

(row-reverse)
<style>
    .container {
        height: 100px;
        width: 40%;
        border: 1px solid black;
        margin: auto;
        background-color: burlywood;
        display: flex;
        flex-direction: row-reverse;
    }
    .item {
        height: 50px;
        width: 20%;
        margin-top: 20px;
        font-size: 40px;
        color:black;
        text-align: center;
    }
.item1 {background-color:yellow;}
    .item2 {background-color: rgb(107, 24, 107);}
    .item3 {background-color:lightgreen}
</style>

<body>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
    </div>
</body>

Flex-direction: (Column)

The working of column is vertically. Order of items is top to bottom.

Example:

Flex-direction: (Column)
<style>
    .container {
        width: 40%;
        border: 1px solid black;
        margin: auto;
        background-color: lightskyblue;
        display: flex;
        flex-direction: column;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
    }
.item1 {background-color:yellow;}
    .item2 {background-color: rgb(107, 24, 107);}
    .item3 {background-color:lightgreen}
</style>

<body>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
    </div>
</body>

Flex-direction: (column-reverse)

Same as column but order of items work bottom to top.  

Example:

Flex-direction: (column-reverse)
<style>
    .container {
        width: 40%;
        border: 1px solid black;
        margin: auto;
        background-color: lightskyblue;
        display: flex;
        flex-direction: column-reverse;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
    }
.item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
</style>

<body>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
    </div>
</body>

Flex-wrap & flex-flow:

Flex- wrap

If data overflow from container then we use wrap property to maintain data.

  Values

  • Nowrap
  • wrap
  • wrap-reverse
Flex-wrap & flex-flow
<style>
    .container {
        width: 40%;
        border: 1px solid black;
        margin: auto;
        margin-top: 100px;
        background-color: lightskyblue;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
        margin: 5px;
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    .item6 {background-color:darkorange}
    .item7 {background-color:slategrey}
    .item8 {background-color:palevioletred}
    .item9 {background-color:lightgreen}
</style>

<body>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        <div class="item item6">E</div>
        <div class="item item7">F</div>
        <div class="item item8">G</div>
        <div class="item item9">H</div>
    </div>
</body>

Nowrap

Default data overflow. Second thing if we use flex-direction: column property with warp then data show in column where the column ends they move to next column instead of going out container.

Example:

Nowrap
<style>
    .container {
        width: 40%;
        border: 1px solid black;
        margin: auto;
        margin-top: 100px;
        background-color: lightskyblue;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
        margin: 5px;
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    .item6 {background-color:darkorange}
    .item7 {background-color:slategrey}
    .item8 {background-color:palevioletred}
    .item9 {background-color:lightgreen}
</style>

<body>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        <div class="item item6">E</div>
        <div class="item item7">F</div>
        <div class="item item8">G</div>
        <div class="item item9">H</div>
    </div>
</body>

Flex-reverse

Wrap-reverse; in this value items start of Right side of container. Like as we use flexi-direction row with flex-wrap: wrap-reverse then order of items show bottom to top. Same we do with column.

Example:

Flex-reverse
<style>
    .container {
        width: 40%;
        height: 200px;
        border: 1px solid black;
        margin: auto;
        margin-top: 60px;
        background-color: lightskyblue;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap-reverse;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
        margin: 5px;
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    .item6 {background-color:darkorange}
    .item7 {background-color:slategrey}
    .item8 {background-color:palevioletred}
    .item9 {background-color:lightgreen}
</style>
<body>     
    <h2 style="text-align: center;" > wrap-reverse</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        <div class="item item6">E</div>
        <div class="item item7">F</div>
        <div class="item item8">G</div>
        <div class="item item9">H</div>
    </div>
</body>

Wrap

If we use wrap value then our data not overflow.Where the space is end he will come on next line instead of going out of border.

Example:

Wrap
<style>
    .container {
        width: 40%;
        border: 1px solid black;
        margin: auto;
        margin-top: 100px;
        background-color: lightskyblue;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
        margin: 5px;
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    .item6 {background-color:darkorange}
    .item7 {background-color:slategrey}
    .item8 {background-color:palevioletred}
    .item9 {background-color:lightgreen}
</style>

<body>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        <div class="item item6">E</div>
        <div class="item item7">F</div>
        <div class="item item8">G</div>
        <div class="item item9">H</div>
    </div>
</body>

Flex-flow

 Flex-flow is short hand of flex-direction and flex-wrap; if we want to use both of them together we do this with flex-flow property. Like flex-flow: column wrap-reverse’

Example:

Flex-flow
<style>
    .container {
        width: 40%;
        height: 200px;
        border: 1px solid black;
        margin: auto;
        margin-top: 30px;
        background-color: lightskyblue;
        display: flex;
        flex-flow: row wrap-reverse;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
        margin: 5px;
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    .item6 {background-color:darkorange}
    .item7 {background-color:slategrey}
    .item8 {background-color:palevioletred}
    .item9 {background-color:lightgreen}
</style>
<body>     
    <h2 style="text-align: center;" > flex flow </h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        <div class="item item6">E</div>
        <div class="item item7">F</div>
        <div class="item item8">G</div>
        <div class="item item9">H</div>
    </div>
</body>

Justify-Content

Horizontal alignment

 Values

  • flex-start
  • flex-end
  •  center
  •  space-around
  •  space-between,
  • space-evenly

Center

All data in centralized.

Example:

Flex Center
<style>
    .container {
        width: 60%;
        border: 1px solid black;
        margin: auto;
        margin-top: 20px;
        background-color: lightskyblue;
        display: flex;
        justify-content: flex-end;
    }
    .item {
        height: 40px;
        font-size: 40px;
        color:black;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    
</style>
<body>     
    <h2 style="text-align: center;" > Justify-Content <br> End</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>


</body>

Flex- end

All items go right corner.

Example:

Flex End
<style>
    .container {
        width: 60%;
        border: 1px solid black;
        margin: auto;
        margin-top: 20px;
        background-color: lightskyblue;
        display: flex;
        justify-content: flex-end;
    }
    .item {
        height: 40px;
        font-size: 40px;
        color:black;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    
</style>
<body>     
    <h2 style="text-align: center;" > Justify-Content <br> End</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Flex-start

By default items start from left. If we not use they have no impact on items.

Example:

Flex-start
<style>
    .container {
        width: 60%;
        border: 1px solid black;
        margin: auto;
        margin-top: 20px;
        background-color: lightskyblue;
        display: flex;
        justify-content: flex-start;
    }
    .item {
        height: 40px;
        font-size: 40px;
        color:black;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    
</style>
<body>     
    <h2 style="text-align: center;" > Justify-Content <br> Start</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Space-between

In this value first and last items of container connect with own side and inner items holds .  the remaining space of container equally .

Example:

Space-between
<style>
    .container {
        width: 60%;
        border: 1px solid black;
        margin: auto;
        margin-top: 20px;
        background-color: lightskyblue;
        display: flex;
        justify-content: space-between;
        height: 40px;
        font-size: 40px;
        color:black;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    
</style>
<body>     
    <h2 style="text-align: center;" > Justify-Content <br>Space-between</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Space-around

In space-around value first and list items holds the same width and inner items holds double of this because every items contain same width on left and right

Example:

pace-around
<style>
    .container {
        width: 60%;
        border: 1px solid black;
        margin: auto;
        margin-top: 20px;
        background-color: lightskyblue;
        display: flex;
        justify-content: space-around;
        height: 40px;
        font-size: 40px;
        color:black;   
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:rgb(233, 236, 10)}
    
</style>
<body>     
    <h2 style="text-align: center;" > Justify-Content <br>Space-around</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Space-evenly

Every items holds same space horizontally.

Example:

space-evenly
<style>
    .container {
        width: 60%;
        border: 1px solid black;
        margin: auto;
        margin-top: 20px;
        background-color: lightskyblue;
        display: flex;
        justify-content: space-evenly;
        height: 40px;
        font-size: 40px;
        color:black;   
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:rgb(233, 236, 10)}
    
</style>
<body>     
    <h2 style="text-align: center;" > Justify-Content <br>Space-evenly</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Align-items

Align-items work on both directions horizontally and vertically.

Values                                                                              

  • flex-start
  • flex-end
  •  Stretch

By default items

Flex-start

Vertically alignment on top.

Example:

Flex-start
<style>
    .container {
        width: 60%;
        height: 300px;
        border: 1px solid black;
        background-color: khaki;
        display: flex;
        padding: 5px;
        font-size: 30px;
        align-items: flex-start;
         
    }
    .item{
        margin: 4px;
        width: 10%;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:rgb(233, 236, 10)}
    
</style>
<body>     
    <h2 style="text-align: center;" > Align-Items</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Flex-end

Vertically alignment on bottom end with base.

Example:

Flex-end
<style>
    .container {
        width: 60%;
        height: 300px;
        border: 1px solid black;
        background-color: khaki;
        display: flex;
        padding: 5px;
        font-size: 30px;
        align-items: flex-end;
         
    }
    .item{
        margin: 4px;
        width: 10%;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:rgb(233, 236, 10)}
    
</style>
<body>     
    <h2 style="text-align: center;" > Align-Items</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Center

Items in center.

Example:

Center
<style>
    .container {
        width: 60%;
        height: 300px;
        border: 1px solid black;
        background-color: khaki;
        display: flex;
        padding: 5px;
        font-size: 30px;
        align-items: center;
         
    }
    .item{
        margin: 4px;
        width: 10%;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:rgb(233, 236, 10)}
    
</style>
<body>     
    <h2 style="text-align: center;" > Align-Items</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Baseline

Baseline set the alignment from the bottom of text may be text have different fonts size .

Example:

Baseline
<style>
    .container {
        width: 60%;
        height: 300px;
        border: 1px solid black;
        background-color: khaki;
        display: flex;
        padding: 5px;
        font-size: 30px;
        align-items: baseline;
         
    }
    .item{
        margin: 4px;
        width: 10%;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink;height:50px;}
    .item5 {background-color:rgb(233, 236, 10); height: 78px;}
    
</style>
<body>     
    <h2 style="text-align: center;" > Align-Items</h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        
    </div>
</body>

Order

               By using order property we can order of items/dives. For this individually we go classes and use order property

By default order is 0 if we use -1 means them more worth instead of 0. Mostly we use order when are making responsive websites.

Example:

<style>
    .container {
        width: 60%;
        border: 2px solid black;
        background-color: khaki;
        display: flex;
        padding: 5px;
        font-size: 30px;
         
    }
    .item{
        margin: 4px;
        width: 10%;
        border: 1px solid black;
        
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen; order: -1;}
    .item4 {background-color:hotpink;}
    .item5 {background-color:rgb(233, 236, 10); order: -2;}
    
</style>
<body>     
    <h2 style="text-align: center;" > Align-Items</h2>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        
    </div>
</body>

Flex-grow

Firstly flex-grow property only work on items not on container. By using this we can increase the width of individual items in group;

Like flex-grow: 2; means these particular items hold the space of double of normal items

Example:

Flex-grow
<style>
    .container {
        width: 60%;
        border: 2px solid black;
        background-color: rgb(116, 114, 96);
        display: flex;
        padding: 5px;
        font-size: 30px;
         
    }
    .item{
       
        width: 10%;
        border: 1px solid black;
        text-align: center;
        flex-grow: 2; 
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen; order: -1;}
    .item4 {background-color:hotpink;}
    .item5 {background-color:rgb(233, 236, 10); order: -2;}
    
</style>
<body>     
    <h2 style="text-align: center;" > Align-Items</h2>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        
    </div>
</body>

Flex-shrink

 Property determine  how the inside items of container will be shrink according to need  we use 0 1 for this o not shrinkable and 1 is not shrinkable

We can use other integers instead of 0 and 1.

Example:

<style>
    .container {
        width: 60%;
        border: 2px solid black;
        background-color: rgb(116, 114, 96);
        display: flex;
        padding: 5px;
        font-size: 30px;
    }
    .item{
       
        width: 200px;
        border: 1px solid black;
        text-align: center;
    }
    .item1 {background-color:rgb(238, 113, 113);flex-shrink: 0; }
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen;}
    .item4 {background-color:hotpink;}
    .item5 {background-color:rgb(37, 133, 223); }
    
</style>
<body>     
    <h2 style="text-align: center;" > Flex-Shrink</h2>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        
    </div>
</body>

Flex-flow

 Flex-flow is short hand of flex-direction and flex-wrap; if we want to use both of them together we do this with flex-flow property. Like flex-flow: column wrap-reverse’

Example:

Flex-flow
<style>
    .container {
        width: 40%;
        height: 200px;
        border: 1px solid black;
        margin: auto;
        margin-top: 30px;
        background-color: lightskyblue;
        display: flex;
        flex-flow: row wrap-reverse;
    }
    .item {
        height: 50px;
        font-size: 40px;
        color:black;
        text-align: center;
        margin: 5px;
    }
    .item1 {background-color:rgb(238, 113, 113);}
    .item2 {background-color: rgb(127, 73, 197);}
    .item3 {background-color:lightgreen}
    .item4 {background-color:hotpink}
    .item5 {background-color:maroon}
    .item6 {background-color:darkorange}
    .item7 {background-color:slategrey}
    .item8 {background-color:palevioletred}
    .item9 {background-color:lightgreen}
</style>
<body>     
    <h2 style="text-align: center;" > flex flow </h2>
    <div class="container">
        <div class="item item1">A</div>
        <div class="item item2">B</div>
        <div class="item item3">C</div>
        <div class="item item4">E</div>
        <div class="item item5">D</div>
        <div class="item item6">E</div>
        <div class="item item7">F</div>
        <div class="item item8">G</div>
        <div class="item item9">H</div>
    </div>
</body>

By Muhammad Tanveer

Related Post

HTML & CSS

HTML5 in 5 minutes: Lets learn web programming.

zainkhizar Oct 10, 2021

Leave a Reply

Your email address will not be published. Required fields are marked *

You Missed

Information Technology

IoT (Internet of Things) and its future in 2023

Ecommerce Information Technology

Cybersecurity and Data Privacy: Protecting Your Information

Ecommerce

The Business of YouTube in 2023: An Overview

Ecommerce Information Technology

Impact of Digitalization on Modern Businesses