如何在HTML中创建Flexbox布局？

要在HTML中创建Flexbox布局，我们使用CSS浮动。我们有多种布局来显示网页上的内容。CSS浮动是实现多列布局的方法之一。

Flexbox布局在CSS3中引入。此布局有助于调整屏幕大小，以便在多个显示设备上正确显示，并使网页具有响应性。通过内容边距的折叠，Flexbox不会折叠。它会根据屏幕大小进行调整。

这是一个您可以轻松创建的Flexbox布局。调整页面大小后，可见如下内容。页面会根据多个设备屏幕进行调整：

示例1 - 不使用Flexbox

让我们首先来看一个不使用Flexbox布局的示例：

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

示例2

下面是一个在HTML中创建Flexbox布局的示例。

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

以下是上述示例程序的输出。

当我们最小化和最大化浏览器标签时，布局会根据标签和设备的屏幕大小进行调整。这使得我们的网页具有响应性。

如下所示。

示例3

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

更新于：2022年10月19日

810次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告