渡一教育：flex+margin布局技巧

发布时间 2025-12-05 22:17:13

阅读量加载中...

布局 1

此演示仅在桌面端浏览器中可用

     html
    
  
<html>
  <head>
    <style>
      .container {
        background-color: #ccc;
        margin: 10px;
        height: 130px;
        display: flex;
      }

      .inner {
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        background-color: burlywood;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
    </div>
  </body>
</html>

布局 2

此演示仅在桌面端浏览器中可用

     html
    
  
<html>
  <head>
    <style>
      .container {
        background-color: #ccc;
        margin: 10px;
        display: flex;
        padding: 5px;
      }

      .inner {
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
      }

      .inner1 {
        background-color: burlywood;
      }

      .inner2 {
        background-color: aquamarine;
      }

      .inner3 {
        background-color: pink;
        margin-left: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner inner1"></div>
      <div class="inner inner2"></div>
      <div class="inner inner3"></div>
    </div>
  </body>
</html>

布局 3

此演示仅在桌面端浏览器中可用

     html
    
  
<html>
  <head>
    <style>
      .container {
        background-color: #ccc;
        margin: 10px;
        display: flex;
        padding: 5px;
      }

      .inner {
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
      }

      .inner1 {
        background-color: burlywood;
      }

      .inner2 {
        background-color: aquamarine;
      }

      .inner3 {
        background-color: pink;
        margin-left: auto;
      }

      .inner4 {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner inner1"></div>
      <div class="inner inner2"></div>
      <div class="inner inner3"></div>
      <div class="inner inner4"></div>
    </div>
  </body>
</html>

布局 4

此演示仅在桌面端浏览器中可用

     html
    
  
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        background-color: #ccc;
        margin: 10px;
        display: flex;
        padding: 5px;
      }

      .inner {
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
      }

      .inner1 {
        background-color: burlywood;
      }

      .inner2 {
        background-color: aquamarine;
      }

      .inner3 {
        background-color: pink;
        margin: auto;
      }

      .inner4 {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner inner1"></div>
      <div class="inner inner2"></div>
      <div class="inner inner3"></div>
      <div class="inner inner4"></div>
    </div>
  </body>
</html>

布局 5

此演示仅在桌面端浏览器中可用

     html
    
  
<html>
  <head>
    <style>
      .container {
        background-color: #ccc;
        margin: 10px;
        display: flex;
        padding: 5px;
        flex-wrap: wrap;
      }

      .inner {
        width: 50px;
        height: 50px;
        box-sizing: border-box;
        border: 1px solid #000;
        --n: 7;
        --space: calc(100% / var(--n) - 50px);
        --m: calc(var(--space) / 2);
        margin: 10px var(--m);
      }

      .inner1,
      .inner13,
      .inner8 {
        background-color: burlywood;
      }

      .inner2,
      .inner9,
      .inner11,
      .inner14 {
        background-color: aquamarine;
      }

      .inner3,
      .inner10,
      .inner6 {
        background-color: pink;
      }

      .inner4,
      .inner16,
      .inner12 {
        background-color: lightblue;
      }

      .inner5,
      .inner15,
      .inner7 {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner inner1"></div>
      <div class="inner inner2"></div>
      <div class="inner inner3"></div>
      <div class="inner inner4"></div>
      <div class="inner inner5"></div>
      <div class="inner inner6"></div>
      <div class="inner inner7"></div>
      <div class="inner inner8"></div>
      <div class="inner inner9"></div>
      <div class="inner inner10"></div>
      <div class="inner inner11"></div>
      <div class="inner inner12"></div>
      <div class="inner inner13"></div>
      <div class="inner inner14"></div>
      <div class="inner inner15"></div>
      <div class="inner inner16"></div>
    </div>
  </body>
</html>

#Margin #Flex #Css