How to create a flexbox Layout in HTML?

HTMLWeb DevelopmentFront End Technology

To create a flexbox layout in HTML, use the CSS Float. Websites have multiple columns to show content. CSS Float is one of the ways to multi-column layouts.

Flexbox layout introduced in CSS3. This layout helps in adjusting the screen size and to get displayed correctly on multiple display devices. With the collapse of a margin of content, the flexbox does not collapse. It adjusts according to screen size.

Example

The following is without using flexbox layout

Live Demo

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <div class="mycontent">
         <header>
            <h1>Tutorialspoint.com</h1>
            <h3>Simply Easy Learning</h3>
         </header>
         <nav>
            <ul>
               <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
               <li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
               <li><a href="/codingground.htm">Coding Ground</a></li>
               <li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
               <li><a href="/online_dev_tools.htm">Tools</a></li>
            </ul>
         </nav>
         <article>
            <h1>About Us</h1>
            <p>This is demo content.</p>
            <p>This is demo content.</p>
            <p>This is demo content.</p>
            <p>This is demo content.</p>
         </article>
      <footer>Add the footer content here</footer>
    </div>
   </body>
</html>

Here’s the flexbox layout, which you can easily create. On resizing the page, the following is visible. The page adjusts according to multiple device screens −

Example

You can try to run the following code to create the above flexible layout in HTML

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .flexmycontent {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
            text-align: center;
         }
         .flexmycontent > * {
            padding: 15px;
            -webkit-flex: 1 100%;
            flex: 1 100%;
         }
         .article {
            text-align: left;
         }
         header {background: #FAFAFA;color:green;}
         footer {background: #FAFAFA;color:green;}
         .nav {background:#eee;}
         .nav ul {
            list-style-type: none;
            padding: 0;
         }
         .nav ul a {
            text-decoration: none;
         }
         @media all and (min-width: 768px) {
            .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
            .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
            footer {-webkit-order:3;order:3;}
         }
      </style>
   </head>
   <body>
      <div class="flexmycontent">
         <header>
            <h1>Tutorialspoint.com</h1>
            <h3>Simply Easy Learning</h3>
         </header>
         <nav class ="nav">
            <ul>
               <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
               <li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
               <li><a href="codingground.htm">Coding Ground</a></li>
               <li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
               <li><a href="/online_dev_tools.htm">Tools</a></li>
            </ul>
         </nav>
         <article class="article">
            <h1>About Us</h1>
            <p>This is demo content.</p>
            <p>This is demo content.</p>
            <p>This is demo content.</p>
            <p>This is demo content.</p>
         </article>
         <footer>Add the footer content here</footer>
      </div>
   </body>
</html>
raja
Published on 01-Feb-2018 09:48:53
Advertisements