Элемент сокращения и роста с CSS - PullRequest
Новая
       20

Элемент сокращения и роста с CSS

0 голосов
/ 17 декабря 2018

Мне интересно, возможно ли достичь такого рода вещей (прикрепленное изображение).Допустим, у меня есть 7 кнопок, и они перекрывают заявленную ширину, но когда я хочу добавить другой элемент или более, эти кнопки должны сжаться.Можно ли добиться этого с помощью CSS только как flex или grid.Все, что я могу сделать, это растянуть одну кнопку по ширине, но когда я добавляю другую, она сразу отображается как встроенная и добавляет к ней следующую кнопку, а не под.First Window Second Window

1 Ответ

0 голосов
/ 17 декабря 2018

Использование flebox

Трюк с количеством делений: 

        .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>
...