flex-box宽高自适应网格布局这两天写布局的时候设计稿上有这样一个效果,为了以后再写这种效果的时候又到处百度查,因此

这两天写布局的时候设计稿上有这样一个效果,为了以后再写这种效果的时候又到处百度查,因此在这里记录一下

html代码

<div class="container">
  <div class="box"><span>1</span></div>
  <div class="box"><span>2</span></div>
  <div class="box"><span>3</span></div>
  <div class="box"><span>4</span></div>
  <div class="box"><span>5</span></div>
  <div class="box"><span>6</span></div>
  <div class="box"><span>7</span></div>
</div>

css代码

<style>
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .container {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    /*去掉最左边和最上边的线*/
    margin-left: -2px;
    margin-top: -2px;
  }

  .box {
    box-sizing: border-box;
    background-color: pink;
    /*一行显示3个格子*/
    width: 33.33%;
    /*格子之间的分割线*/
    border-left: 2px solid #999;
    border-top: 2px solid #999;
    /*格子中的内容居中*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*当最后一行格子少于三个时左对齐*/
  .container::after {
    content: '';
    flex: auto;
  }
</style>

最终效果

参考链接: