はどのように私は、ブレードのレイアウト

Question

を作るのですか、次のように私は、「ブレード」を使用してアプリケーションのレイアウトを作りたい：

ブレードの高さは常に100VHとなります。

ブレードの幅は可変です。

ブレードが追加され、jsで削除されます（1から始まり、次々と追加されます）。幅がなくなると、左側が画面外にスクロールします。

この例は、現在のAzureポータルです。アイテムをクリックするたびに、そのアイテムに関するより具体的なデータを含む新しいブレードが表示されます。

しかし、これをどうやって始めたらよいか分かりません。私が考えることのできる最も近いものはブートストラップ・グリッド・システムを使用していますが、そこで使用されているグリッド・システムと幅が一致する必要はありません。 「ブレード」が正しい用語であるかどうかはわかりませんが、それはAzureチームによって使用されるものです。

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

上記は、左側に緑色の黄色、右側にピンク色が並んでいる必要があります。ピンクの上に緑色の黄色の代わりに。

以下はAzureポータルのスクリーンショットです。これは、3 "ブレード" 私はフレキシボックスを見つけ

Answer 1

があります

<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