there are many flex box property let me show you one by one
Flexbox is advanced version of display: inline-block Not so Advanced but also make very flexible and easy work don by display:Flex
lets take example and explain every functionality of flex-box

CODE

<style>
        .container{
            background-color: pink;
            height: 50vh;
            width: 50vw;
            padding: 0.5em;
            margin: 25vh auto 0;
        }

        .item{
            background-color: lightblue;
            margin: 0.5em;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

OUTPUT

FLEXBOX CONTAINERS

1.Flex-direction:

its gives basically your flex-item a starting direction

Flex-direction :row

its default version CSS for browser

CODE

<style>
        .container{
            background-color: pink;
            height: 50vh;
            width: 50vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: row; 
            /* default on applying flex */
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;
        }
    </style>

OUTPUT

Flex-direction:row-reverse

its just like work as float : right
its first item is going in the last and start from to right side

CODE

<style>
        .container{
            background-color: pink;
            height: 50vh;
            width: 50vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: row-reverse; 
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;
        }
    </style>

OUTPUT

Flex-direction:column

in this all the item get back to column way as just like start

CODE

<style>
        .container{
            background-color: pink;
            height: 50vh;
            width: 50vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: column; 
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;
        }
    </style>

OUTPUT

flex-direction:column-reverse

its first item is going in the last and start from to bottom side

CODE

<style>
        .container{
            background-color: pink;
            height: 50vh;
            width: 50vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: column-reverse; 
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;
        }
    </style>

OUTPUT

flex-Wrap

wrap
- or this overflown situation will be solved by this wrap. means they manage all items wrapped in the container:

1.flex-wrap:nowrap

so here by default the flex-wrap is no wrap and the item will be overflown
and they try as small as can flex-wrap

CODE

<style>
        .container{
            background-color: pink;
            height: 50vh;
            width: 50vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

OUTPUT

2.flex-wrap : wrap

CODE

    display: flex;
            flex-direction: row;
            flex-wrap: wrap;

OUTPUT

note: to wrap up items in container using width is also applicable

there is always messed up between

justify-content, align-items, align-content so bare with me till end

justify-content

Remember justify-content is always target in main axis

1.justify-content:flex-start;
- get all container items in start of container

**code**

<style>
                display: flex;
                justify-content: flex-start;
</style>

<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

output

2.justify-content:flex-end;

get all container items in end of container

CODE

<style>
                display: flex;
                justify-content: flex-end;
</style>

<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

OUTPUT

3.justify-content:center;

get all container items in center of container

CODE

<style>
                display: flex;
                justify-content: center;
</style>

<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

OUTPUT

4.justify-content:space-between;

get all container items where space is between with corresponding all items of container

CODE

<style>
                display: flex;
                justify-content: space-between;
</style>

<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

OUTPUT

5.justify-content:space-evenly;

get all container items where space is evenly with corresponding all items of container

CODE

<style>
                display: flex;
                justify-content: space-evenly;
</style>

<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

OUTPUT

6.justify-content:space-around;

get all container items where space is around with corresponding all items of container
equal amount of space around each items in container

CODE

<style>
                display: flex;
                justify-content: space-around;
</style>

<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item">class item 5</div>
    </div>
</body>

OUTPUT

NOTE: if flex-direction is column then the all this 6 functionality work same ……so always remember justify-content is work on main axis .

(main axis = flex-direction for justify content)

Align-items

its target on cross axis i mean its target on y axis

1.align-items:stretch

its default for the align-items

CODE

display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: stretch;

OUTPUT

1.align-items:flex-start

its take width and height to fit content and going in the starting of the container

CODE

    display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

OUTPUT

2.align-items:flex-end

its take width and height to fit content and going in the ending of the container

CODE

            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-end;

OUTPUT

3.align-items:center

its take width and height to fit content and going in the center of the container

CODE

            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

OUTPUT

NOTE: if the flex-direction : column the same function use in column way just like justify -content depends on flex-direction .

WHEN use WHICH use justify-content or align-items ?

for the simple way try one then try another
but for the answer you have to used to with practise…..as time you will use align-item and as time you will use justify-content

4.align-items : baseline
- its take width and height to fit content and going in the baseline of the container

**CODE**

            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: baseline ;

OUTPUT

NOTE: for base line sometime u will highlight some navbar button and make it big but you also want your button get in one line for that time baseline comes in action

while align-items: flex-start output

CODE

<style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .big{
            font-size: 2rem;
                    }
</style>

</head>
<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item big">class item 5</div>
    </div>
</body>

OUTPUT

while align-items: baseline output

CODE

<style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: baseline;
        }
        .big{
            font-size: 2rem;
                    }
</style>

</head>
<body>
    <div class="container">
        <div class="item">class item 1</div>
        <div class="item">class item 2</div>
        <div class="item">class item 3</div>
        <div class="item">class item 4</div>
        <div class="item big">class item 5</div>
    </div>
</body>

OUTPUT

align-content

align-content have all the property which justify-content have
also align content have conflict with align-items
align-content only when you have multiple line of contents

1.align-content:
- litterly everything you will use justify -content except space -evenly property .you will use in align-content
- NOTE: what us difference between align-item and align content
  
  align item will be the flex-start take all item into flex-start in which ever content they had
  
  CODE:
  
  align-item : center;
  
  OUTPUT:
  
  where align-content had take all items into center
  
  CODE:
  
  align-content : center;
  
  OUTPUT:
FLEXBOX ITEMS

1.flex-grow
- if you apply on any item flex-grow its default value is 0.tou can apply 1
- so it takes the all maximum space in container as much as possible
- HOW FAST ITS TAKES THE larger WITH DECIDE BY FLEX-GROW PROPERTY

### **flex-grow0️⃣**

<style>
         .container{
            background-color: pink;
            height: 50vh;
            width: 80vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: row;
        }
        .one{
            flex-grow: 0;
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;    
        }
    </style>

OUTPUT

flex-grow1️⃣

CODE

<style>
         .container{
            background-color: pink;
            height: 50vh;
            width: 80vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: row;
        }
        .one{
            flex-grow: 1;
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;    
        }
    </style>

OUTPUT

2.flex-shrink & flex-basis

FLEX-SHRINK :

how fast it takes to shrink its depend on flex-shrink property
so flex-shrink make the size of the flex shrink it can as much as possible
flex-basis the room of the size which is take by while flex-grow
when you give flex-grow a and give size with flex-shrink default value means your items are now flexible way better then anything .in whatever the the flex-basis size it takes
CODE

<style>
         .container{
            background-color: pink;
            height: 50vh;
            width: 80vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: row;
        }
        .one{
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 250px;
        }
        .two{
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 250px;
        }
        .three{
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 250px;
        }
        .item{
            background-color: lightblue;
            margin: 0.5em;    
        }
    </style>

OUTPUT

FLEX RESPONSIVE

OUTPUT

flex-grow & flex-shrink is totally opposite functionality.
but the more value its has the more faster it doing its functionality.
means flex-shrink :1 and flex-grow3 in corresponding two item .the more higher value functionality apply first
you can use shorthand for the flex-grow. flex-shrink. flex

flex-grow: 0;
flex-shrink: 1; 
flex-basis: 250px;

FLEX:0 1 250

ONE IMPORTANT NOTE FOR FLEX SHORTHAND ITS THAT .
IF YOU WRITE ONLY FLEX:250PX (250px = random size) ITS ALREDY TAKEN FLEX:1 1 250PX MEANS ALREDY TAKEN
FLEX-GROW:1,
FLEX-SHRINK:1,
FLEX-BASIS:250PX;
ORDER
- you can give order value -1,0,1,2 most of time.
- because of this you can use the order of any items first and last by giving them order
- by default its 0
- but there is who is larger number in compare to other comes last …..vice versa more smaller then other then only comes first

    .one{
           flex:0 1 250px;
           ordeer: 2;
             }

    .two{
           flex:0 1 250px;  
               }
   .three{
          flex:0 1 250px;
           order: 1;
            }

OUTPUT

if I don’t give the any order to any item then give item 3 to -1 its comes first by (default its position its last)

Align-self:

align-self is use for the differently act any item in container
quite dependent on align-item property so be care of that too
if u want class item 2 in end of flex you will do like this

NORMAL OUTPUT

CODE

<style>
         .container{
            background-color: pink;
            height: 50vh;
            width: 80vw;
            padding: 0.5em;
            margin: 25vh auto 0;

            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }
        .one{
            /* flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 250px; */
            flex:0 1 250px; 
        }
        .two{
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 250px;
            align-self: flex-end;

        }

DESIRE OUTPUT

why align-self depends on align-item then check this example

we all know align-item will be default value stretch and no we apply align-self :flex-end
OUTPUT

dipesh joshi's Blog

dipesh joshi's Blog

CSS Flexbox

Ultimate Solution of CSS

Table of contents

FLEXBOX CONTAINERS

1.Flex-direction:

Flex-direction :row

Flex-direction:row-reverse

Flex-direction:column

flex-direction:column-reverse

flex-Wrap

1.flex-wrap:nowrap

2.flex-wrap : wrap

justify-content

1.justify-content:flex-start;

2.justify-content:flex-end;

3.justify-content:center;

4.justify-content:space-between;

5.justify-content:space-evenly;

6.justify-content:space-around;

Align-items

1.align-items:stretch

1.align-items:flex-start

2.align-items:flex-end

3.align-items:center

WHEN use WHICH use justify-content or align-items ?

4.align-items : baseline

align-content

1.align-content:

1.flex-grow

flex-grow1️⃣

2.flex-shrink & flex-basis

FLEX RESPONSIVE

Align-self: