Html 如何制作刀片布局

我想使用“刀片”制作一个应用程序布局，如下所示：

铲刀高度始终为100VH

刀片宽度将是可变的

刀片将添加和删除与js，从一开始，然后添加一个接一个。宽度用完后，左侧应滚离屏幕

当前Azure门户就是一个例子。每次单击某个项目时，都会出现一个新刀片，其中包含有关该项目的更具体数据

但我不知道该如何开始。我能想到的最接近的方法是使用引导网格系统，但是宽度不一定要匹配那里使用的网格系统。我甚至不知道“刀片”是否是正确的术语，但这正是Azure团队所使用的术语

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

上面应该是并排的，左边是绿黄色，右边是粉红色。而不是粉红色上面的绿黄色

下面是Azure门户的屏幕截图。它有3个“刀片”

我找到了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>

.柔性容器{
填充：0；
保证金：0；
列表样式：无；
显示器：flex；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：200px；
高度：100vh；
保证金：5px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}

1
2
3
4

---

请提供您的试用代码好的，我会看看我是否能想出什么办法。如果您是这个意思，我会在网格系统中调用id卡。我明白，有时很难开始，但屏幕会帮助我们帮助您。请提供。提供了屏幕截图@目标，即较旧的Azure门户