CSS缩小和增长

Question

我想知道是否有可能实现这种目标（附加图片）。可以说我有7个按钮，它们跨越声明的宽度，但是当我想添加其他元素或更多元素时，这些按钮应该缩小。是否有可能仅使用CSS来实现，例如flex或grid。我所能做的就是将一个按钮跨过整个宽度，但是当我添加另一个按钮时，它将立即显示为内联并向其添加下一个按钮，而不是在其下方。

Answer 1

使用flebox

有关div数量的窍门是：

        .right-side button:nth-last-child(8):first-child,
        .right-side button:nth-last-child(8):first-child ~ *{
           //set style if only when you have more then 7 buttons inside .right-side dive.... 
              else(less then 8) nothing will happend
        }

还将div定位为8 +：

.right-side button:nth-child(n+8){
float: right;
position: relative;
top: calc(-100vh + (100vh / 7 - 1px));
}

此处是完整代码：

    .wrap{
        display:flex;
        width:100%;
        height:100%;
    }
    .left-side,.right-side{
        width:50%;
        height:100vh;
        margin: 5px;
    }
    .left-side{
      background:pink;
    }
    .right-side{
   position: relative;
    }
    .right-side button{
     width:100%;
     height:calc(100vh / 7 - 1px);
     background:pink;
     
    }

    .right-side button:nth-last-child(n+8):first-child,
    .right-side button:nth-last-child(n+8):first-child ~ *{
     width:50%;
    }
    .right-side button:nth-child(n+8){
    float: right;
    position: relative;
    top: calc(-100vh + (100vh / 7 - 1px));
    }

<div class="wrap">
        <div class="left-side"></div>
        <div class="right-side">
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
        </div>
    </div>

    <h1>Same style with 7 buttons</h1>
    <div class="wrap">
        <div class="left-side"></div>
        <div class="right-side">
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
        </div>
    </div>