【CSS面试题】Flex实现九宫格

2024-04-13 05:32:02
开发
36

考察知识：
flex布局 + 水平垂直居中的实现

初始效果

代码关键：给父盒子添加以下属性

      flex-wrap: wrap; /* 允许换行 */
      justify-content: space-around; /* 主轴对齐方式 */
      align-content: space-around; /* 多行在侧轴上的对齐方式 */

在这里插入图片描述

<!DOCTYPE html>
<html lang="zn-ch">
  <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" />
    <title>flex九宫格</title>
  </head>
  <body>
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>

  <script></script>

  <style lang="scss">
    .box {
      width: 400px;
      height: 400px;
      border: 1px solid red;

      display: flex; /*  */
      flex-wrap: wrap; /* 允许换行 */
      justify-content: space-around; /* 主轴对齐方式 */
      align-content: space-around; /* 多行在侧轴上的对齐方式 */

      .item {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px solid red;
      }
    }
  </style>
</html>

优化：每个小盒子的内容水平垂直居中

在这里插入图片描述

  <body>
    <div class="box">
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
      <div class="item">
        <div class="pink"></div>
        item-name
      </div>
    </div>
  </body>

  <script></script>

  <style lang="scss">
    .box {
      width: 400px;
      height: 400px;
      border: 1px solid red;

      display: flex; /*  */
      flex-wrap: wrap; /* 允许换行 */
      justify-content: space-around; /* 主轴对齐方式 */
      align-content: space-around; /* 多行在侧轴上的对齐方式 */

      .item {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        border: 1px solid red;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;

        .pink {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: pink;
        }
      }
    }
  </style>

在这里插入图片描述

原文地址:https://blog.csdn.net/weixin_63681863/article/details/137694876 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1778898897851256832.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

【CSS面试题】Flex实现九宫格

初始效果

优化：每个小盒子的内容水平垂直居中

相关推荐

最近更新

热门阅读