Как сделать макет режущего диска

Question

Я хочу сделать макет приложения с помощью «лезвий» следующим образом:

лезвия высоты всегда будет 100VH.

Ширина клинка будет переменной.

Лезвия будут добавлены и удалены с помощью js, начиная с одного, затем добавив один за другим. После окончания пробега левая сторона должна прокручиваться за кадром.

Примером этого является текущий Лазурный Портал. Каждый раз, когда вы нажимаете элемент, появляется новое лезвие с более конкретными данными об этом элементе.

Но я не уверен, как начать работу с этим. Самое близкое, что я могу придумать, это использовать систему бутстрапов, но ширина не обязательно будет соответствовать используемой там сетке. Я даже не знаю, является ли «лезвия» правильным термином, но это то, что используется командой Azure.

<div style="height: 100vh; background: greenyellow; width: 200px"></div> 
<div style="height: 100vh; background: pink; width: 200px"></div> 

Вышеупомянутые должны быть рядом друг с другом, с зеленым левом и розовым справа от него. Вместо зеленого цвета над розовым.

Вот скриншот портала Azure. Он имеет 3 "лезвия"

Answer 1

Я нашел Flexbox:

<style> 
    .flex-container { 
     padding: 0; 
     margin: 0; 
     list-style: none; 
     display: flex; 
    } 

    .flex-item { 
     background: tomato; 
     padding: 5px; 
     width: 200px; 
     height: 100vh; 
     margin: 5px; 
     line-height: 150px; 
     color: white; 
     font-weight: bold; 
     font-size: 3em; 
     text-align: center; 
    } 
</style> 
<ul class="flex-container"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
</ul> 

CSS Tricks on the Flexbox