Flexbox, Leinwand & dynamische Größenanpassung

Question

Ich habe Probleme mit meiner Canvas-basierten Anwendung.

Ich habe 4 (oder mehr) Leinwand, jede in Div mit beiseite Inhalt gewickelt. Diese Wrapper sind selbst in "hbox" verpackt. Das Ziel besteht darin, ein dynamisches Raster aus Leinwänden unter Verwendung von flexbox zu erstellen.

<div id="primaryScene" class="scene"> 
    <div class="hbox" id="hbox0" style="flex-grow: 1.2;"> 
     <div class="viewWrapper" id="view0" style="flex-grow: 0.4;"> 
      <canvas class="canvasView"></canvas> 
      <aside class="sideContent"></aside> 
     </div> 
     <div class="viewWrapper" id="view1" style="flex-grow: 1.6;"> 
      <canvas class="canvasView"></canvas> 
      <aside class="sideContent"></aside> 
     </div> 
    </div> 
    <div class="hbox" id="hbox1" style="flex-grow: 0.8;"> 
     <div class="viewWrapper" id="view2"> 
      <canvas class="canvasView"></canvas> 
      <aside class="sideContent"></aside> 
     </div> 
     <div class="viewWrapper" id="view3"> 
      <canvas class="canvasView"></canvas> 
      <aside class="sideContent"></aside> 
     </div> 
    </div> 
</div> 

mit CSS:

.scene { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: column; 
    flex-flow: column; 
    overflow: hidden; 
} 

.hbox { 
    min-height: 0; 
    -webkit-flex: 1 1 0%; 
    flex: 1 1 0%; 
    display: -webkit-flex; 
    display: flex; 
    position: relative; 
} 
.viewWrapper { 
    min-height: 0; 
    -webkit-flex: 1 1 0%; 
    flex: 1 1 0%; 
    position: relative; 
    margin: 0 2px 2px 0; 
} 

.canvasView { 
    display: block; 
} 

.canvasView { 
    position: absolute; 
} 

.sideContent{ 
    max-width: 120px; 
    overflow-x: hidden; 
    overflow-y: auto; 
    margin-right: 6px; 
} 

Weil ich einige Ereignisse die Größe benötigen, ich verwende nicht die CSS-Eigenschaft resize: both; Troubles anhängen, wenn ich versuche .sideContent hinzufügen, weil ich sie auf der rechten wollen jede Leinwand.

Davor, mit der Leinwand in absolut, ich brauchte nur dynamisch Breite und Höhe mit {.viewWrapper}.getBoundingClientRect().width|height zu aktualisieren (neben der Tatsache, dass sie flex:1, viewWrapper und hbox sind oben manuell verkleinern mit flex-grow wie im Code gezeigt). Jetzt, wenn ich die Zeichenfläche zu flex:1; wechseln und die absolute Eigenschaft entfernen, schrumpfen sie nicht mehr. Ich bekomme auch verschiedene Werte von {oneCanvas}.getBoundingClientRect() zwischen Chrome und Firefox (nicht auf IE getestet), so dass ich dies auch nicht verwenden kann.

Was kann ich tun? Sag mir, wenn du mehr Informationen brauchst.

Answer 1

Ich bin mir nicht sicher, ob dies das ist, was Sie wollten, aber hier ist eine Beispielgeige unten.

Scene ist ein flexibler Container, damit Sie die verschiedenen hboxes manipulieren können. Viewwrapper ist auch ein Flex-Container, so dass Sie einstellen können, wie Sie Ihre Leinwand und beiseite biegen möchten.

Der Grund, warum das Hinzufügen von position: absolute das Layout beeinflusst, liegt darin, dass absolut positionierte Elemente nicht am Flex-Layout teilnehmen.

https://www.w3.org/TR/css-flexbox-1/#abspos-items

https://jsfiddle.net/mzrrsunn/1/

.scene { 
    display: flex; 
} 

.hbox { 
    flex: 1; 
} 
.viewWrapper { 
    display: flex; 
    margin: 0 2px 2px 0; 
} 

.canvasView { 
    flex: 1 1 60%; 
} 

.sideContent{ 
    flex: 0 1 40%; 
} 

canvas{ 
    border:1px solid black; 
} 

aside { 
    border: 1px solid blue; 
}