Allinea gli elementi della casella flessibile alla linea di base dell'ultima riga di testo in un blocco

Question

Sto tentando di ottenere l'ultimo esempio sull'immagine seguente, utilizzando la casella flessibile.

Da quello che vedo, la proprietà align-items: baseline; grandi opere quando i blocchi hanno solo 1 riga.

La proprietà align-items: flex-end; crea alcuni problemi principalmente perché gli elementi sinistro e destro hanno dimensioni di carattere e altezze diverse. Sebbene i bordi degli elementi siano allineati, lo spazio bianco creato dalle dimensioni del carattere e dalle differenze di altezza della linea appare molto negativo quando l'elemento non ha bordi.

Sto provando a trovare una buona soluzione a tutto tondo senza JS.

Grazie in anticipo.

Answer 1

Puoi avvolgere il contenuto delle voci flex all'interno involucri inline-block:

.flex { 
 
    display: flex; 
 
    align-items: baseline; 
 
} 
 
.inline-block { 
 
    display: inline-block; 
 
} 
 

 
.item { border: 1px solid red; } 
 
.item:first-child { font-size: 200%; } 
 
.flex::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid blue; }

<div class="flex"> 
 
    <div class="item"> 
 
    <div class="inline-block">Lorem<br />Ipsum<br />Dolor</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="inline-block">Foo bar</div> 
 
    </div> 
 
</div>

che funzionerà perché, secondo CSS 2.1,

la linea di base un 'blocco in linea' è la linea di base dell'ultima casella di riga nel flusso normale, _{^{a meno che non sia presente nessuna casella di flusso nella casella o se la sua proprietà 'overflow' ha un valore calcolato diverso da 'visible', nel qual caso la linea di base è il margine inferiore .}}

Answer 2

Al momento della stesura del progetto di allineamento di lavoro CSS box modello propone una ‘prima’ e ‘ultima’ il valore da aggiungere al 'align-voci. Il consentirebbe:

align-items: last baseline

disponibili, sembra solo per essere supportato da Firefox in modo è uno per il futuro.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items