zoukankan      html  css  js  c++  java
  • flex中的align-items和align-content的区别

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          #wrap {
             150px;
            height: 500px;
            display: flex;
            /* flex-direction: column; */
            border: 1px solid;
            flex-wrap: wrap;
            /* 侧轴行对齐 */
            align-items: center;
            /* 侧轴块对齐 */
            /* align-content: center; */
          }
          .box1,
          .box2 {
             100px;
            height: 150px;
            border: 1px solid;
          }
          .box1 {
            background-color: pink;
          }
          .box2 {
            background-color: green;
          }
        </style>
      </head>
      <body>
        <div id="wrap">
          <div class="box1"></div>
          <div class="box2"></div>
        </div>
      </body>
    </html>

    1.水平排列,换行,行对齐,中间留有空白

    2.块对齐,

  • 相关阅读:
    112.路径总和
    二叉树的中序遍历
    HTML基础及案例
    web概念概述
    Spring JDBC
    数据库连接池
    JDBC连接池&JDBCTemplate
    JDBC
    MySQL多表&事务
    DCL
  • 原文地址:https://www.cnblogs.com/fsg6/p/13675499.html
Copyright © 2011-2022 走看看