Create a Responsive Layout using Flexbox in Hindi

HTML

Create a Responsive Layout using Flexbox in hindi – Aaj ham Flex box ko istemal kar ke ek responsive layout banayenge . Responsive matlab aisa web page jo ki jitna accha big screen (eg. – laptop) par dikhata hai , utna hi achha small screen (eg. – mobile) par bhi dikhta ho.

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

Create a Responsive Layout using Flexbox in hindi

To sbse pahale ham create krenge hamara html content , aur use .html file me save kar lenge .

<!-- Add Css file link -->
    <title>Responsive Layout</title>
    <header>Header</header>
    <div id="main">
        <article>Article</article>
        <nav>Nav</nav>
        <aside>Aside</aside>
    </div>
    <footer>Footer</footer>

Upar likhe hui html file me hamne ek header, div ke andar ek article,ek nav and ek aside section liye hue hai, ek footer lia hua hai. Abhi yah hme browser me sirf ek html content return krega. Is code ko style krne aur responsive banane ke liye , isme hmne external css ki file add ki hui hai, to aiye ek css file banate hai aur usme apna css ka code likhte hai ..

Example:

body{
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        margin: 0;
    }

#main{
        display: flex;
        flex: 1;
        flex-direction: column;
    }

#main &gt; article{
        flex: 1;
    }

#main &gt; nav,aside {
        background: #5800cc;
    }

#main &gt; nav {
        order: -1;
    }

header, footer {
        background: #10b1a9;
        height: 20vh;
    }

header, footer ,article,nav,aside {
        padding: 1em;
    }

@media screen and (min-width: 576px) {
        #main {
            flex-direction: row;
        }

#main &gt; nav, aside {
            flex: 0 0 20vw;
        }
    }

Jab bhi screen 576 px se kam hogi ,tb hme apna layout change hota dikhega. Mtlb 576 px se kam par hme mobile wala layout dikhega and 576 px se jyada par hme big screen wala layout dikhega.

big screen
small screen view

To is post me hamne sikha ki kis tarike se ham ek responsive layout bana skte hai.
Also Read:

Thank You!

Leave a Reply

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