Anche distribuire div con una dimensione fissa

Question

Ho passato un paio di domande simili ma le risposte non hanno funzionato per me.

Ho diversi div e ognuno di essi ha una larghezza fissa di 210 px.

Il contenitore in cui si trova può essere ridimensionato in base alle dimensioni dello schermo dell'utente. I div devono essere equamente distanziati orizzontalmente in ogni momento e dovrebbe anche spezzare la linea di div in un'altra linea se non c'è spazio.

Per chiarire di più, fare riferimento alla figura seguente.

Questo JS fiddle ha raggiunto il risultato desiderato. Ma non vedo come funzionerà per i miei div che devono avere una larghezza fissa.

width: calc(100%/6); 

EDIT:

Il problema con il JS Fiddle è che quando la dimensione dello schermo è dove ci sia uno spazio, ma non abbastanza spazio per montare un altro div. In tal caso, l'ultimo div dovrebbe essere più vicino a destra.

Answer 1

Flexbox può fare ciò che si vuole impostando justify-content a space-around (o space-between, a seconda delle esigenze di presentazione). Ecco un esempio veloce:

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>

Verificare caniuse.com per i dettagli su supporto del browser e prefisso di.

Answer 2

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

ecco un articolo che spiega come realizzare layout visivo senza utilizzare Flexbox (che viene fornito con un sacco di bug e si dovrebbe immergersi in profondità per farlo funzionare in tutti i browser in modo coerente - il supporto del browser peggiora quando non si aggiusta la sintassi, quindi supponiamo: "Non c'è Flexbox!").

La soluzione al vostro problema in questione sarebbe piuttosto semplice senza Flexbox:

.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. */ 
} 

fa che risolve il problema?

Answer 3

Se mi riferisco a screenshot e tutti idea, FlexBox è qui per aiutarvi (mi aspettavo feed back dai miei commenti in realtà circa 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