haizlin/fe-interview

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

Opened this issue · 7 comments

haizhilin2013 commented

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

3+1官网

我也要出题

ruihengChe commented

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>

carrie-xin commented 
    <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;
    }
  • 👍1
Supremeyh commented 
  <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>
  • 👍1
ramwin commented

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

xyydd commented 
<!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>
  • 👍1
ramwin commented

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

haizhilin2013 commented

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

不错！！！举一反三