zoukankan      html  css  js  c++  java
  • 使用flex布局(多行,一行三个),换行后最后一行左右对齐问题

    <html>
    
    <head>
      <style>
        html,
        body,
        ul {
          margin: 0;
          padding: 0;
        }
    
        ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          /* justify-content: space-between; */
        }
    
        li {
          width: 33%;
          background: #ededee;
          margin-top: 1rem;
          list-style: none;
        }
    
        ul:after {
          content: "";
          width: 30%;
          height: 0px;
          visibility: hidden;
        }
      </style>
    </head>
    
    <body>
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </body>
    
    </html>

    主要代码:

    父:

     ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
      }

    子:

    li {
          width: 33%;
    }

  • 相关阅读:
    iptraf查看TCP/UDP某个特定端口的带宽与流量
    linux read 命令
    2 css常识二
    1 css常识
    18 表单
    17 事件
    16 DOM
    15 BOM
    14 函数-高级
    13 对象
  • 原文地址:https://www.cnblogs.com/liubingyjui/p/13993958.html
Copyright © 2011-2022 走看看