HTML में फ्लेक्सबॉक्स लेआउट कैसे बनाएं?

CSS फ्लेक्सबॉक्स (Flexbox)

फ्लेक्सबॉक्स लेआउट CSS3 में पेश किया गया। यह मल्टी-कॉलम लेआउट बनाने, स्क्रीन साइज़ के अनुसार एडजस्ट होने और रिस्पॉन्सिव डिज़ाइन के लिए शक्तिशाली है। मार्जिन कोलैप्स की समस्या नहीं होती।

उदाहरण: फ्लेक्सबॉक्स लेआउट

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