How to create a flexbox Layout in HTML?

HTML Web Development Front End Technology

To create a flexbox layout in HTML, we use CSS Float. We have multiple layouts to show content on a web page. 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 and makes the web page responsive. With the collapse of a margin of content, the flexbox does not collapse. It adjusts according to screen size.

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 1 − Without Using Flexbox

Let us first look at an example without using the flexbox layout −


<!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>

Example 2

Given below is an example to create a flexbox layout in HTML.


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .head{
         font-size:17px;
         margin-left:10px;
         margin-bottom:15px;
      }
      body {
         margin: 0 auto;
         background-position:center;
         background-size: contain;
      }
      .menu {
         position:static;
         top: 0;
         background-color:skyblue;
         padding:10px 0px 10px 0px;
         color:white;
         margin: 0 auto;
         overflow: hidden;
      }
      .menu a {
         display: flex;
         background-color: DodgerBlue;
         float: left;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 20px;
         background-color: #f1f1f1;
         margin: 10px;
         padding: 20px;
         font-size: 30px;
      }
      .menu{
         right: auto;
         float: right;
      }
      footer {
         width: 100%;
         bottom: 0px;
         background-color:slategrey;
         color: #fff;
         position: absolute;
         padding-top:20px;
         padding-bottom:50px;
         text-align:center;
      }
      .body{
         margin-left:10px;
      }
      .aside{
         right:inherit;
         float: right;
         width: 20%;
      }
   </style>
</head>
<body>
   <header>
      <div class="head"><h1><span style="color: red">NPTEL</span></h1> Online Learning Initiatives by IITs and IISc
funded by MoE, Govt. of India</div>
   </header>
   <div class="menu">
      <a href="#home">HOME</a>
      <a href="#course">COURSE</a>
      <a href="#help">HELP</a>
      <a href="#about">ABOUT</a>
      <a href="#settings">SETTINGS</a>
   <div class="menu">
   <a href="#login">LOGIN</a>
   </div>
   </div>
   <div class = "body">
      <section id="Content">
         <h3>1.6 crore+ enrollments<br>
         15 lakhs+ exam registrations<br>
         4500+ LC colleges<br>
         3500+ MOOCs completed<br>
         60+ Industry associates</h3>
      </section>
   </div>
   <div class="aside"><aside>1.3 Billion+ views<br>
      37 lakhs+ YouTube subscribers<br>
      2300+ unique courses available for self study</aside></div>
   <footer style="font-size: 20px">Documents
      Careers
      Help Videos
      Live Sessions
      Information on NPTEL semesters</footer>
</body>
</html>

Following is the output for the above example program.

As we minimize and maximize our browser tab, the layout adjusts according to screen size of the tab and also of the device. This makes our web page responsive.

As we see the below output.

Example 3

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


<!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>

Lokesh Badavath

Updated on: 19-Oct-2022

707 Views

Kickstart Your Career

Get certified by completing the course

Get Started