Center mehrere Panels mit Flexbox

Ich habe derzeit eine Reihe von Panels, während im Vollbild eine zentriert korrekt, wenn sie mit einer kleinen Auflösung sind, sind sie nicht. Im Prinzip habe ich einen Behälter mit rund 7 Platten drin:Center mehrere Panels mit Flexbox

<div class"container"> 
    <div class="panel"></div> 
    <div class="panel"></div> 
    <div class="panel"></div> 
    <div class="panel"></div> 
    <div class="panel"></div> 
    <div class="panel"></div> 
    <div class="panel"></div> 
</div>

ich einen Code Stift erstellt habe zu zeigen, wie es in vollem Umfang nutzen aussieht: https://codepen.io/r3plica/pen/XemvyW?editors=0100

und in einer kleinen Auflösung (dh Mobil) es sieht so aus: https://codepen.io/r3plica/pen/eGJOJN?editors=0100

Ich habe die Hintergrundfarbe pink auf dem zweiten Codepen gemacht. Ich möchte, dass die Objekte im zweiten Stift zentriert werden, ohne die Darstellung in großer Auflösung zu beeinträchtigen.

Weiß jemand, wie ich das erreichen kann?

Quelle

2017-09-18 r3plica

Related wenn nicht Duplicate - https://StackOverflow.com/Questions/32802202/How-To-Center-a-Flex-Container-But-Left-Align-Flex-Etems –

Es ist kein Duplikat, ihre Layout erfordern sie ist nicht das gleiche wie meine – r3plica

Daher habe ich "Related" verwendet. Diese Probleme sind jedoch im Wesentlichen die gleichen. –

Ok gut funktionieren, ich schaffte dies:

https://codepen.io/r3plica/pen/OxMyPL?editors=0100#0

Alles, was ich tat, war der Flexbox auf dem Behälter der Platten loszuwerden und aktualisiert die perso- Platten verwenden Margen mit calc wie folgt aus:

.persona-panels { 
    > div { 
     .panel { 
      vertical-align: top; 
      display: inline-block; 
      margin: 7.5px calc((100% - #{$persona-panel-width})/2); 

      @include large-width { 
       margin: 7.5px; 
      } 
     } 
    } 
}

Quelle

2017-09-18 13:36:40 r3plica

-1

Ändern der display Eigenschaft auf den Panels ist es vermasseln.

Flexbox display Eigenschaft funktioniert anders, in dem es die Kinder auch ändert, Kinder werden dann flex Elemente.

Nach this Antwort, aber es ist praktischer, einfach inline-block zu verwenden.

Quelle

2017-09-18 11:09:19 JackHasaKeyboard

Im Flex-Container befindet sich ein Div mit Klasse ng-scope. Es verhindert, dass der Code effektiv ist/funktioniert. Entfernen Sie das aus dem HTML oder machen Sie das zu Ihrem Flex-Container. Dies ist, was tatsächlich Code wie folgt aussieht:

<div class="container"> 
    <div class="ng-scope DELETE THIS DIV"> 
     <div class="panel"></div> 
     <div class="panel"></div> 
     <div class="panel"></div> 
     <div class="panel"></div> 
     <div class="panel"></div> 
     <div class="panel"></div> 
     <div class="panel"></div> 
    </div> 
</div>

Und in der CSS entfernen Sie die inline-block von der Linie 222, und es wird zentriert. Fügen Sie dann flex-flow: row wrap zu .persona-panels hinzu.

Quelle

2017-09-18 11:18:35

-1

Sie müssen Eigenschaft diese Eigenschaft aus .panel entfernen. dann wird es

display-inline-block

Quelle

2017-09-18 12:02:20

nein wird es nicht, weil es nur alle in 1 Spalte zwingen wird – r3plica

Diese Lösung wird nicht funktionieren. Es zerstört das Layout für den gesamten Bildschirm. Zweitens wäre es nicht "display-inline-block", sondern "display: inline-block". – Binarus

Haben Sie einen Live-Link, wo ich Code überprüfen kann. –

Center mehrere Panels mit Flexbox

Antwort

Verwandte Themen