如何在HTML中创建Flexbox布局？

要使用HTML创建Flexbox布局，请使用CSS Float。网站有多个列来显示内容。CSS Float是多列布局的一种方法。

CSS3中引入了Flexbox布局。此布局有助于调整屏幕尺寸并在多个显示设备上正确显示。随着内容边缘的折叠，flexbox不会折叠。它根据屏幕尺寸进行调整。

示例

以下是不使用flexbox布局的情况

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <div class="mycontent">
         <header>
            <h1>Nhooo.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>

这是flexbox布局，您可以轻松创建它。在调整页面大小时，以下内容可见。页面根据多个设备屏幕进行调整-

示例

您可以尝试运行以下代码以在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>Nhooo.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>

基础教程