Come mantenere gli elementi flessibili avvolti della stessa larghezza degli elementi nella riga precedente?

Ho un

    che è un flex-box e un mucchio di

  • s in esso che sono gli elementi flessibili.

    Sto cercando di ottenere che

  • abbia una larghezza flessibile, che rimanga tra due dimensioni usando min-width e max-width. Funziona benissimo fintanto che sono sulla stessa linea. Tuttavia, quando si avvolgono, i
  • sulla nuova linea usano quanto più spazio ansible. Il che significa che sono piccoli sulla prima riga e grandi sulla seconda riga quando ce ne sono solo alcuni.

    C’è un modo per dire a flexbox di mantenere gli articoli la larghezza dopo il confezionamento, mantenendo la larghezza flessibile?

    demo di avvolgimento:

    inserisci la descrizione dell'immagine qui

    Il mio codice assomiglia a questo:

     

    E il CSS:

     ul display: flex flex-wrap: wrap li min-width: 40px max-width: 100px flex: 1 0 0 

    Ecco un esempio dal vivo su codepen con alcuni commenti extra , ridimensiona la finestra per vederla avvolgere.

    TL; DR

    Questo non è qualcosa che definirei una soluzione di per sé, ma è una soluzione alternativa elegante che utilizza solo le query multimediali e, soprattutto, non JavaScript !

    Mixin (SCSS):

     @mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) { flex-grow: 1; flex-basis: $flex-basis; max-width: 100%; $multiplier: 1; $current-width: 0px; @while $current-width < $max-viewport-width { $current-width: $current-width + $flex-basis; $multiplier: $multiplier + 1; @media(min-width: $flex-basis * $multiplier) { max-width: percentage(1/$multiplier); } } } 

    Uso:

    Applica il mixin al tuo object flex:

     .flex-item { @include flex-wrap-fix(100px) } 

    Aggiornare:

    Il mixin di cui sopra dovrebbe fare il trucco, a patto che la larghezza del tuo contenitore flessibile corrisponda alle dimensioni della tua finestra, come nel caso dell'esempio di OP. Le query multimediali non ti aiuteranno diversamente, perché sono sempre basate sulla larghezza della finestra. Tuttavia, è ansible utilizzare la libreria css-element-queries e le sue query di elementi anziché le query multimediali del browser. Ecco un mixin che puoi applicare al contenitore flex:

     @mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) { display: flex; flex-wrap: wrap; > * { max-width: 100%; flex-grow: 1; flex-basis: $flex-basis; } $multiplier: 1; $current-width: 0px; @while $current-width < $max-expected-width { $current-width: $current-width + $flex-basis; $multiplier: $multiplier + 1; &[min-width~="#{$flex-basis * $multiplier}"] > * { max-width: percentage(1/$multiplier); } } } 

    Spiegazione:

    Diciamo che, come nell'esempio dell'OP, vogliamo che ogni elemento abbia una larghezza massima di 100px , quindi sappiamo che per una larghezza del browser di 100px possiamo adattare un articolo per riga, e così via:

     | Viewport Width | Max Item Count Per Row | Item Width (min-max) | |----------------|------------------------|----------------------| | <= 100 | 1 | 0px - 100px | | <= 200 | 2 | 50px - 100px | | <= 300 | 3 | 50px - 100px | | <= 400 | 4 | 50px - 100px | | <= 500 | 5 | 50px - 100px | | <= 600 | 6 | 50px - 100px | 

    Possiamo scrivere query multimediali per creare le seguenti regole:

     | Viewport Width | Max Item Count Per Row | Item Max Width | Calculation | |------------------------------------------------------------------------| | <= 100px | 1 | 100% | (100/1) | | <= 200px | 2 | 50% | (100/2) | | <= 300px | 3 | 33.33333% | (100/3) | | <= 400px | 4 | 25% | (100/4) | | <= 500px | 5 | 20% | (100/5) | | <= 600px | 6 | 16.66666% | (100/6) | 

    Come questo:

     li { flex: 1 0 0 max-width: 100%; } @media(min-width: 200px) { li { max-width: 50%; } } @media(min-width: 300px) { li { max-width: 33.33333%; } } @media(min-width: 400px) { li { max-width: 25%; } } @media(min-width: 500px) { li { max-width: 20%; } } @media(min-width: 600px) { li { max-width: 16.66666%; } } 

    Certo, è ripetitivo, ma molto probabilmente stai usando una sorta di preprocessore, che può prendersi cura della ripetitività per te. Questo è esattamente ciò che fa il mixin nella sezione TL; DR di cui sopra.

    Tutto quello che dobbiamo fare ora è specificare 100px come flex-basis , facoltativamente, la larghezza massima della finestra del browser (predefinita a 2000px ) per creare le query multimediali per:

     @include flex-wrap-fix(100px) 

    Esempio

    Infine, una versione biforcuta dell'esempio CodePen originale con l'output desiderato, utilizzando il mixin di cui sopra:

    http://codepen.io/anon/pen/aNVzoJ

    demo della soluzione

  • Ho sperimentato la tua codepen e ho impostato flex: 0 1 10%

    Ovviamente è ansible impostare la base flessibile come si desidera, volevo solo dimostrare il punto, che se si imposta la base flessibile e si riduce il problema, in questo caso si comporterà molto più bene.

    Penso che questo sia ciò di cui avevi bisogno. Ecco l’anteprima: http://codepen.io/anon/pen/bwqNEZ

    Saluti

    Penso di averlo capito … ma è hacky. Il risultato sono le 14 immagini in scala da 100 px fino a 40 px, anche su più righe.

    Da 107 px a 40 px di larghezza

    • Aggiunto un set duplicato dei 14
    • originali e li ha aggiunti al flex

        .

      • Successivamente, il secondo set è stato reso invisibile:

         li:nth-of-type(n + 15) { visibility: hidden; } 
      • Al fine di mantenere una flessibilità uniforms, le seguenti modifiche a ciascun

      • :

         li { min-width: 40px; max-width: 10%; flex: 1 0 100px; } 

      Si prega di rivedere il CodePen

      e / o Snippet in modalità Pagina intera.

       ul { display: flex; flex-wrap: wrap; max-height: 258px; } li { min-width: 40px; max-width: 10%; flex: 1 0 100px; } ul, li { margin: 0; padding: 0; list-style: none; } ul { background-color: tomato; } li { margin: 0.5em; background-color: darkgreen; } li img { width: 100%; opacity: 0.5; } li figure, li img { margin: 0; padding: 0; } li:nth-of-type(n + 15) { visibility: hidden; } 
       

      Non funziona molto bene, ma puoi ottenere qualcosa in questa direzione con le colonne.

       column-gap: 10px; column-width: 150px; 

      https://codepen.io/hobbeshunter/pen/OgByNX

      Questo non è perfetto ma vale la pena provare. http://codepen.io/anon/pen/MKmXpV

      I cambiamenti sono

       li width: 7.1428% flex: 0 0 auto figure margin: 0 auto background-color: darkgreen min-width: 40px max-width: 100px 
      • cambiato li flex in “0 0 auto” e la larghezza li in una percentuale in base al numero di lis.
      • spostato le larghezze min e max da li alla figura
      • spostato lo sfondo verde sulla figura e centrato le figure nella lis

      L’impostazione della min-width max-width in percentuale ha consentito a tutte le immagini di rimanere della stessa larghezza quando si interrompono sulla riga successiva. Non è l’ideale, ma più vicino a quello che stai cercando?

       li { min-width: 15%; max-width: 15%; } 

      La mia soluzione non è l’ideale, poiché si appoggia a JQuery: http://codepen.io/BigWillie/pen/WwyEXX

      CSS

       ul { display: flex; flex-wrap: wrap; } li { min-width: 40px; max-width: 100px; flex: 1; } 

      JavaScript

       var eqRowFlexItem = function(elem) { var w; var $elem = $(elem); // Clear out max-width on elements $elem.css('max-width', ''); w = $(elem).eq(0).width(); $(elem).css('max-width', w); } eqRowFlexItem('li'); $(window).resize(function() { eqRowFlexItem('li'); }); 

      Non sono completamente sicuro che risponda al problema. Ho trovato questo post, poiché il titolo corrispondeva al problema che stavo avendo. Stavo cercando un effetto per cui avrei avuto un numero maggiore di elementi per riga su schermi più grandi e meno elementi per riga su schermi più piccoli. In entrambi i casi, anche questi elementi dovevano ridimensionarsi per adattarsi … a tutti i dispositivi.

      Tuttavia, quegli elementi vaganti sull’ultima riga si espandono sempre per riempire lo spazio rimanente.

      JQuery ottiene la larghezza del primo elemento e lo applica come larghezza massima a ogni elemento. L’OP voleva che i blocchi cadessero in una larghezza min-larghezza / larghezza massima. L’impostazione della larghezza massima in CSS sembra funzionare. Cancelliamo la larghezza massima dall’elemento, quindi il valore predefinito è la larghezza massima nel CSS … quindi ottiene la larghezza effettiva.

      Ho avuto lo stesso problema, quindi ho usato un piccolissimo bit di Jquery per controllare la larghezza delle scatole e renderle tutte della stessa larghezza anche una volta avvolte.

      La mia demo è su Wrap CodePen Flex, con larghezza uguale su una nuova riga

       function resize(){ var colWidth; var screen = $(window).width(); if(screen < 576){ colWidth = Math.round(screen / 2) - 31; $(".item").width(colWidth); } if(screen > 575 && screen < 768){ colWidth = Math.round(screen / 3) - 31; $(".item").width(colWidth); } else if (screen > 767 && screen < 992){ colWidth = Math.round(screen / 4) -31; $(".item").width(colWidth); } else if (screen > 991 ){ colWidth = Math.round(screen / 6) -31; $(".item").width(colWidth); } } window.onresize = function() { resize(); } resize(); 
       html, body{ padding:0; margin:0; } .flex-container { padding: 0; margin: 0; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; justify-content: left; background-color:#ddd; } .wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .item { background: tomato; height: 100px; margin:0 15px; line-height: 100px; color: white; font-weight: bold; font-size: 2em; text-align: center; margin-top:10px; } 
        
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

      Per Stylus puoi utilizzare questo mix: https://codepen.io/anon/pen/Epjwjq

       flex-wrap-fix($basis, $max) { flex-grow: 1 flex-basis: $basis max-width: 100% $multiplier = ceil($max / $basis) for i in (1..$multiplier) { @media(min-width: ($basis * i)) { max-width: percentage(1/i) } } } 

      usa max-width: 40px non max-width: 100px