Auch divs mit einer festen Größe verteilen

Question

Ich ging durch ein paar ähnliche Fragen, aber die Antworten funktionierten nicht für mich.

Ich habe mehrere divs, und jeder von ihnen hat eine feste Breite von 210px.

Der Container, in dem sie sich befinden, kann die Größe abhängig von der Bildschirmgröße des Benutzers ändern. Die divs müssen zu jeder Zeit gleichmäßig horizontal verteilt sein und die div-Linie in eine andere Linie aufteilen, wenn kein Platz vorhanden ist.

Weitere Informationen finden Sie in der folgenden Abbildung.

Diese JS fiddle hat das Ergebnis erreicht, das ich will. Aber ich kann nicht sehen, wie es für meine Divs funktioniert, die eine feste Breite haben müssen.

width: calc(100%/6); 

EDIT:

Das Problem mit dem JS Fiddle ist, dass wenn die Bildschirmgröße ist, wo es Platz hat, aber nicht genug Raum ein anderes div passen. In diesem Fall sollte das letzte Div näher an der rechten Seite sein.

Answer 1

Flexbox können tun, was Sie wollen von justify-content zu space-around Einstellung (oder space-between, je nach Ihren Bedürfnissen Präsentations). Hier ist ein kurzes Beispiel:

body{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:space-around; 
 
    margin:0; 
 
    padding:5px; 
 
} 
 
div{ 
 
    background:#000; 
 
    flex:0 0 210px; 
 
    height:210px; 
 
    margin:5px; 
 
    width:210px; 
 
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

prüfen caniuse.com Einzelheiten zur Browser-Unterstützung und Vorfixierung.

Answer 2

http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Also hier ist ein Artikel erklären, wie visuelle Layouts zu erzielen, ohne Flexbox (die mit einer Reihe von Fehlern kommen und Sie würden in tief tauchen, um es in allen Browsern funktioniert konsequent - Browser-Unterstützung wird schlechter, wenn Sie nicht mit der Syntax oben drauf basteln, also nehmen wir an: "Es gibt keine Flexbox!").

Die Lösung für Ihr Problem bei der Hand wäre ohne Flexbox ziemlich geradlinig sein:

.container { 
    padding: y%; /* by giving the container a percentage based padding, you will create a slowly upscaling container as screen-width increases */ 
} 

.box { 
    width: 210px; /* whyever they need a fixed width but ok, who knows */ 
    margin-right: x%; /* x should be replaced with a value that distributes your containers evenly across the screen and makes them wrap when needed. Fiddle with the value until it makes sense to you. */ 
} 

Does, die das Problem lösen?

Answer 3

Wenn ich Bildschirm beziehen sich auf Schuss und jeder Idee ist Flexbox hier um Ihnen zu helfen (Ich hatte erwartet, aus meinen rückzukoppeln tatsächlich über http://jsfiddle.net/bvgn46hu/108/ & http://jsfiddle.net/bvgn46hu/114/)

#container { 
 
    margin:1em; 
 
    color:turquoise; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    border: solid; 
 
    padding:2vh; 
 
    align-items:center; 
 
    justify-content:space-between; 
 
} 
 
#container > div:before { 
 
    content:'boxe '; 
 
    padding-right:0.25em;; 
 
} 
 
#container > div { 
 
    display:flex; 
 
    
 
    align-items:center; 
 
    justify-content:center; 
 
    min-height:25vh; 
 
    border: solid; 
 
    margin:1vh 0; 
 
    width:400px; 
 
    min-width:calc(100vw/4); 
 
    max-width: 45%; 
 
    
 
}

<div id="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

codepen to play with