Wie mache ich eine Klinge Layout

Question

Ich möchte eine Anwendung Layout mit „Klingen“ machen, wie folgt:

Klingenhöhe immer 100VH sein wird.

Die Klingenbreite ist variabel.

Klingen werden mit js hinzugefügt und entfernt, beginnend mit eins, und dann nacheinander hinzugefügt. Nachdem die Breite abgelaufen ist, sollte die linke Seite außerhalb des Bildschirms verschoben werden.

Ein Beispiel dafür ist das aktuelle Azure Portal. Jedes Mal, wenn Sie auf ein Objekt klicken, wird ein neues Blatt mit spezifischeren Daten zu diesem Objekt angezeigt.

Aber ich bin mir nicht sicher, wie ich damit anfangen soll. Der nächste, den ich mir vorstellen kann, ist das Bootstrap-Grid-System, aber die Breite stimmt nicht mit dem dort verwendeten Grid-System überein. Ich weiß nicht einmal, ob "Blades" der richtige Begriff ist, aber das wird vom Azure-Team verwendet.

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

Die oben genannten sollten nebeneinander sein, mit greenyellow auf der linken Seite und rosa auf der rechten Seite davon. Statt grüngelb über dem Rosa.

Hier ist ein Screenshot des Azure-Portals. Es verfügt über 3 "Klingen"

Answer 1

ich die Flexbox gefunden:

<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