Layoutvorlage - Flexbox

-1

Ich bin ziemlich neu in der Flexbox, aber ich habe das Gefühl, dass ich es recht gut verstehe. Allerdings kann ich dieses Layout, an dem ich gerade arbeite, nicht erfassen. Ich habe die richtigen Größen für die Bilder, wie ich sie haben möchte.Layoutvorlage - Flexbox

Ich verwende dies in Verbindung mit Flexbox-Eigenschaften. Mein Denkprozess dahinter war eine Navigationsleiste, 100% Breite. 1 div mit 3 divs innen und setze das äußere div in Flex-Richtung: row; etc ... dann wiederhole diesen Schritt mit einem weiteren Satz von 3 divs innerhalb eines div.

Es scheint auf großen Browsern zu arbeiten, aber wie ich skalieren/Größe der Fensterbreite ändern, werden die Bilder immer kleiner. Das ist was ich will, aber ich möchte es auch in voller Größe in Bezug auf das Fenster.

Zunächst einmal bin ich mir nicht einmal sicher, ob das möglich ist, aber ich habe verschiedene Versuche ausprobiert, es zu funktionieren und ich habe Mühe, eine Lösung zu finden.

Ich dachte über die Verwendung von Medienabfragen, um das Layout für verschiedene Bildschirmgrößen zu ändern, scheint aber ein so mühsamer Prozess (ich bin nicht faul, aber es muss eine intuitivere Möglichkeit, dies wie oben erwähnt zu tun).

Erstes Bild sieht gut aus in einem Browser über 1600px Höhe (musste Bild skalieren, deshalb sieht etwas gestreckt aus);

Aber alles unter diesem beginnt Whitespace;

<body> 
<div layout="column" layout-fill> 
     <div class="md-toolbar-tools"> 
      <span flex></span> 
      <md-button style="font-size: 1.5vw;"> 
       PORTLAND.&nbsp;<md-icon md-font-icon="reorder" style="color:  white; font-size: 2vw;">reorder</md-icon> 
      </md-button> 
     </div> 
    </md-toolbar> 
</div> 

<div style="display: flex; flex-direction: row; justify-content: flex-start;  flex-wrap: nowrap; height: 100%; width: 100%; font-size: 0; overflow-y: hidden;  "> 
    <div style="height: 50%; width: 25%; flex-wrap: wrap;"> 
     <img class="resize" style="height: 100%; width: 100%;" ng- src="/assets/01_TILE.jpg" /> 
    </div> 
    <div style="height: 50%; width: 25%; flex-wrap: wrap;"> 
     <img class="resize" style="height: 100%; width: 100%;" ng- src="/assets/02_TILE.jpg" /> 
    </div> 
    <div style="height: 50%; width: 50%; flex-wrap: nowrap;"> 
     <img class="resize" style="height: 100%; width: 100%;" ng- src="/assets/03_TILE.jpg" /> 
    </div> 
</div> 
<div style="display: flex; flex-direction: row; justify-content: flex-start;  height: 100%; width: 100%; font-size: 0;"> 
    <div style="height: 50%; width: 50%;"> 
     <img style="height: 100%; width: 100%;" ng-src="/assets/04_TILE.jpg" /> 
    </div> 
    <div style="height: 50%; width: 25%;"> 
     <img style="height: 100%; width: 100%;" ng-src="/assets/05_TILE.jpg" /> 
    </div> 
    <div style="height: 50%; width: 25%;"> 
     <img style="height: 100%; width: 100%;" ng-src="/assets/06_TILE.jpg" /> 
    </div> 
</div> 
</body>

ich die meisten meiner CSS-Beiträge geschrieben haben (inline, also könnte ich eine Frage stellen up) Wenn Sie Fragen haver oder mehr Code benötigen lassen Sie mich wissen und ich werde es post up.

Jede Hilfe wäre großartig, da ich für eine Lösung ratlos bin.

Mit freundlichen Grüßen

Quelle

2016-05-06 Troy

Jede Hilfe wäre willkommen. Vielen Dank! – Troy

Verwenden Sie Winkelmaterial? Wenn ja, Flexbox ist bereits enthalten: https://material.angularjs.org/latest/layout/introduction –

Hey Javier, ja, ich benutze Angular-Material. Ich weiß, dass es Flex-Box enthält. Ich weiß immer noch nicht, wie man dieses Layout funktioniert. – Troy

in Ihrem HTML-Code I die <md-toolbar> Tag
Im nicht der größte Experte in Winkel Material vermissen, stellen Sie die Dokumentation zu lesen: https://material.angularjs.org/latest/layout/children
Wie ich verstehe Sie zwei wollen Reihen mit jeweils 50% Höhe des Bildschirms.
HTML-Code:

<div layout="row"> 
    <div flex="25"> 
    </div> 
    <div flex="25"> 
    </div> 
    <div flex="50"> 
    </div> 
</div> 
<div layout="row"> 
    <div flex="50"> 
    </div> 
    <div flex="25"> 
    </div> 
    <div flex="25"> 
    </div> 
</div>

in Ihrem CSS-Code einfach hinzufügen:

div.layout-row { 
    height:50%; 
}

Es macht Ihre Zeilen 50% des Bildschirms nehmen, ich hoffe, es hilft.

Quelle

2016-05-06 17:59:12

Layoutvorlage - Flexbox

Antwort

Verwandte Themen