È possibile "cancellare" l'elemento in un contenitore "display: flex"?Come interrompere la riga (elemento "clear") in css flexbox
voglio ottenere qualcosa di simile:
con carri, ho potuto "chiaro" dopo ogni elemento 5 ° con le query adeguati mezzi di comunicazione ...
È possibile aggiungere flex-wrap: wrap; al contenitore e impostare la larghezza degli elementi all'interno.
Quindi si dovrebbe avere il controllo per decidere su quali elementi il galleggiante si fermerà.
Ah dannazione, ho accidentalmente svalutato questo e ora non mi permetterà di cambiarlo se non modifichi la tua risposta ... Se vuoi, vai avanti e modificalo un po 'e tornerò per cambiare il mio voto! – peterjmag
@peterjmag Solo passando e visto quello. Ho ripulito la risposta, puoi mandarlo su per ora. –
@RegularJoe Fantastico, grazie! Upvoted. – peterjmag
Si può provare ad aggiungere una larghezza con percentuali agli elementi all'interno del contenitore , insieme alla proprietà flex-wrap: wrap. Quindi, con una query multimediale, si manipola la larghezza di detti elementi dato un punto di rottura. Ecco un esempio:
.container {
display: flex;
flex-wrap: wrap;
}
.element {
width: calc(25% - 20px);
height: 100px;
margin: 10px;
background-color: red;
}
@media(max-width: 800px) {
.element {
width: calc(50% - 20px);
}
}<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
Piccolo formattazione – tashuhka
Perché non solo ridimensiona il contenitore flessibile per accogliere il numero di elementi in ogni linea e lasciare che avvolgono organicamente? – BoltClock