CSS: in linea tutti gli elementi che si adattano sulla prima linea, interruzione di riga dopo ogni elemento successivo

Question

javascript e nessun supporto larghezza dello schermo interroga

Sto cercando di trovare un CSS-only modo per raggiungere la situazione raffigurato nell'immagine qui sotto. Non ho potuto trovare un modo per creare i seguenti:

• una linea di blocchi (blocchi ancorati oppure galleggiavano blocchi) con larghezza variabile, allineato alla destra della linea usando float: destra o testo destra allineare
• elementi che non si adattano alla linea, passare alla riga successiva. Tutti gli elementi dopo la prima riga hanno una propria linea.

Ho sperimentato diverse strategie inutilmente, ho la sensazione che la flexbox potrebbe essere d'aiuto ma non ho molta esperienza con la flexbox e non ho trovato il modo di usarla.

---

Un paio di cose che ho provato:

1. cercano di mettere il contenuto degli elementi in una: prima di elemento pseudo, utilizzando i contenuti: attr (-contenuto dei dati). L'elemento stesso non avrebbe larghezza. Nella riga successiva ci sarebbe un elemento flottante a sinistra con una larghezza del 99,9% che spinge ogni elemento su una linea successiva. Il problema con questo è che gli elementi sulla prima riga dovrebbero mantenere la loro larghezza normale e non ho trovato un modo per farlo. Lo pseudo-selettore di prima riga è limitato alle parole sulla riga e non funziona per i contenitori in linea sulla riga
2. Alternativa al metodo precedente: aggiungere anche: dopo gli pseudo elementi che sono posizionati in modo assoluto e hanno lo stesso contenuto di il: prima Gli elementi: before comparivano solo sulla prima riga e non si avvolgono, gli elementi: after formerebbero la lista verticale sulla destra. Anche con questo modo sono entrato in un vicolo cieco.

---

UPDATE: Ho fatto una (meno) violino che funziona quando larghezze degli elementi sono fissi e uguali. Purtroppo larghezza fissa, quindi non ancora quello che voglio raggiungere. Se vuoi aiutarmi potresti forse usarlo come punto di partenza. Inserisco il contenuto in a: prima così forse potrebbe traboccare l'elemento e in qualche modo sistemare la larghezza dell'elemento in automatico.

attualmente Chrome solo: http://jsfiddle.net/2px3b63j/7/

html:

<div class="pusher"></div> 
<nav> 
    <a data-title="First" href="#"></a><a data-title="Second" href="#"></a><a data-title="Third" href="#"></a><a data-title="Fourth" href="#"></a><a data-title="Fifth" href="#"></a> 
</nav> 

meno:

@h: 3em; 
@w:6em; 
* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font: 0.9rem sans-serif; 
    background: #666; 
} 

.pusher { 
    float: left; 
    width: ~"calc(100% - " (@w * 1.01) ~")"; 
    height: @h * 6; 
    -webkit-shape-outside: polygon(0 @h, 100% @h, 100% 100%, 0 100%); 
} 

nav { 
    position: relative; 
    text-align: right; 
    background: white; 
    height: @h; 
    line-height:0; 
    a { 
    position: relative; 
    text-align:center; 
    width: @w; 
    max-width: 100%; 
    display: inline-block; 
    background: white; 
    text-decoration: none; 
    color: #333; 
    font-weight: bold; 
    height: @h; 
    line-height: @h; 
    &:before { 
     content: attr(data-title); 
    } 
    } 
} 

LINK a rispondere: https://jsfiddle.net/ky83870x/1/ non funziona in Internet Explorer, ma suppongo che lavora a bordo . Se qualcuno può trovare un modo per farlo funzionare in IE, sarò molto interessato a conoscere

Answer 1

Una possibilità per ottenere il risultato utilizzando la casella flessibile.

Rendi il flexbox così stretto da adattarlo a qualsiasi bambino. Ciò costringe i bambini ad andare uno di fila.

Aggiungere uno pseudo elemento prima del primo figlio per forzare un margine aggiuntivo.

giustificare la flessione in base alle esigenze

e posizionare la flessione verso destra, perché ora tutto è a sinistra.

Gli elementi sono colorati per vedere facilmente ciò che sta accadendo

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    border: solid 1px red; 
 
    width: 10px; 
 
    left: 500px; 
 
    position: absolute; 
 
    justify-content: flex-end; 
 
} 
 

 
.container div { 
 
    font-size: 20px; 
 
    margin: 5px; 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    flex-basis: auto; 
 
    flex-shrink: 0; 
 
} 
 

 
.container:before { 
 
    content: ""; 
 
    margin-left: -500px; 
 
    flex-basis: 10px; 
 
    background-color: yellow; 
 
    height: 6px; 
 
}

<div class="container"> 
 
    <div>Lorem</div> 
 
    <div>Ipsum dolor sit amet</div> 
 
    <div>Consectetur adipisicing elit</div> 
 
    <div>Unde saepe</div> 
 
    <div>Placeat neque mollitia</div> 
 
    <div>Accusamus fuga</div> 
 
    <div>Lorem</div> 
 
    <div>Ipsum dolor sit amet</div> 
 
    <div>Consectetur adipisicing elit</div> 
 
    <div>Unde saepe</div> 
 
    <div>Placeat neque mollitia</div> 
 
    <div>Accusamus fuga</div> 
 
</div>