CSS 骰子弹性布局

Question

如何实现，弹性布局，筛子始终是正方形

Answer 1

我的思路如下

<div class="box">
    <img
      class="shadow_img"
      src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
    />
    <ul class="list-wrap">
      <li class="cur"></li>
      <li></li>
      <li></li>
      <li></li>
      <li class="cur"></li>
      <li></li>
      <li></li>
      <li></li>
      <li class="cur"></li>
    </ul>
  </div>

.box {
  max-width: 500px;
  width: 100%;
  border: 1px solid #000;
  margin: auto;
  position: relative;
  border-radius: 10px;
  img {
    display: block;
    width: 100%;
  }
  .list-wrap {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    li {
      border-radius: 10px;
      width: 30%;
      height: 30%;
      &.cur {
        background-color: skyblue;
      }
    }
  }
}

在线示例：https://codepen.io/lssssi-163-com/pen/QWQJxxb

Answer 2

需要弹性布局吗？如果你能保证正方形就是已知高宽了，那直接内嵌9宫格不就好了，然后用visible控制显示而不是display none控制显示。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。