1 效果

2代码

 .container > .header {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
      }
      .container > .header > p {
        font-size: 2em;
        width: 5em;
        border: 1px dashed;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
      }
      sub {
        border: 3px salmon solid;
        background-color: sandybrown;
        border-radius: 1em;
        width: 1.5em;
        height: 1.5em;
      }
      .container > .main {
        width: 30em;
        background-color: rgb(57, 184, 32);
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
      }
      .main > .box {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: center;
      }
      .footer {
        display: flex;
        border: sandybrown 1px dashed;
        flex-flow: row wrap;
        width: 15em;
      }
      .BFC1,
      .BFC2,
      .BFC3,
      .BFC4,
      .BFC5,
      .BFC6 {
        border: 1px violet solid;
      }
      .BFC2 {
        display: flex;
        flex-flow: column nowrap;
      }
      .BFC1 > .box,
      .BFC2 > .box {
        background-color: rgb(18, 236, 182);
        box-sizing: border-box;
        margin: 1em;
        padding: 0em;
      }
      .BFC3 > .box,
      .BFC4 > .box,
      .BFC5 > .box,
      .BFC6 > .box {
        background-color: rgb(146, 207, 46);
        box-sizing: border-box;
        border: tomato solid 1px;
        margin: 0;
        padding: 0;
        height: 4em;
        width: 3em;
      }
      .BFC3 > .left,
      .BFC4 > .left {
        float: left;
      }
      .BFC3 > .right,
      .BFC4 > .right {
        border: springgreen solid 5px;
        height: 8em;
        width: 5em;
      }
      .BFC4 > .right {
        overflow: hidden;
      }
      .BFC5 > .out,
      .BFC6 > .out {
        border: solid 3px violet;
        width: 5em;
      }
      .BFC5 > .out > .in,
      .BFC6 > .out > .in {
        border: wheat 2px solid;
        float: left;
      }
      .BFC6 > .out {
        overflow: hidden;
      }