[css] 第476天使用flex实现一个自适应的九官格 #2730

Open

Open

[css] 第476天使用flex实现一个自适应的九官格#2730

Labels

Collaborator

第476天使用flex实现一个自适应的九官格

我也要出题

added

css部分：
*{ margin: 0; padding: 0; } .jiu { position: absolute; margin: 30px 60px; display: flex; width: 450px; height: 459px; background-color: burlywood; justify-content: space-between; flex-wrap: wrap; list-style: none; } .jiu li{ background-color:thistle; width: 33%; height: 33%; }
html部分：
<ul class="jiu"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

    <section class="nine-flex-layout">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

    .nine-flex-layout {
        display: flex;
        flex-wrap: wrap;
    }

    .nine-flex-layout div {
        width: calc(100% / 3 - 20px / 3);
        height: 80px;
        margin: 0 10px 10px 0;
        background: skyblue;
    }

    .nine-flex-layout div:nth-child(3n) {
        margin-right: 0;
    }

  <div class="wrap">
    <p class="card"></p>
    <p class="card"></p>
    <p class="card"></p>
    <p class="card"></p>
    <p class="card"></p>
    <p class="card"></p>
    <p class="card"></p>
    <p class="card"></p>
    <p class="card"></p>
  </div>
  <style>
    .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      width: 600px;
      height: 600px;
      border: 1px solid black;
    }
    .card {
      width: calc(33% - 10px);
      height: 60px;
      background-color: blanchedalmond;
    }
  </style>

自适应九宫格不难, 大家考虑一下如果只有8个格子, 7个格子也要自适应呢. 类似朋友圈的九图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex 九宫格</title>
  <style>
    body {
      background-color: #000;
    }
    .box {
      width: 300px;
      height: 300px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-bottom: 30px;
    }
    .item {
      width: 98px;
      height: 98px;
      background-color: skyblue;
      border: 1px solid #fff;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="box" style="height: 200px;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="box" style="width: 200px;height: 200px;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="box" style="width: 300px;height: 100px;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

@xyydd 你这个item的宽度是固定的, 要是能自适应box的宽度就更好了

CollaboratorAuthor

自适应九宫格不难, 大家考虑一下如果只有8个格子, 7个格子也要自适应呢. 类似朋友圈的九图

不错！！！举一反三

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Participants