CSS/Flexbox: stessa larghezza dell'elemento più grande, come le colonne

Question

Ho creato un componente di elenco per la mia app, non posso usare le tabelle a causa dello stile.

Voglio che gli elementi all'interno delle "righe" abbiano la stessa larghezza dall'alto in basso, come le colonne. Il codice è simile a questo:

<div class="row"> 
    <div class"element>iPhone </div> 
    <div class"element>Buy an iPhone now!</div> 
</div> 
<div class="row"> 
    <div class"element>Airport Express </div> 
    <div class"element>Buy an Airport Express now!</div> 
</div> 
<div class="row"> 
    <div class"element>iPad </div> 
    <div class"element>Buy an iPad now!</div> 
</div> 

Questo è ciò che attualmente appare come:

E questo è, quello che voglio:

C'è un modo per farlo?

Answer 1

tabelle utilizzare i CSS:

• separazione tra le file con border-spacing
• Borders nelle cellule. È possibile utilizzare border-radius per arrotondarli.
• Pseudoelemento visualizzato come cella per riempire lo spazio disponibile a destra
• white-space: nowrap per impedire alle celle di restringersi a causa dello pseudoelemento.

.wrapper { 
 
    display: table; 
 
    border-spacing: 0 10px; 
 
} 
 
.row { 
 
    display: table-row; 
 
    border: 1px solid; 
 
} 
 
.row::after { 
 
    content: ''; 
 
    display: table-cell; 
 
    width: 100%; 
 
    border: 1px #6AACC9; 
 
    border-style: solid none; 
 
} 
 
.element { 
 
    display: table-cell; 
 
    border: 1px solid #6AACC9; 
 
    border-right-color: #adadad; 
 
    border-left-style: none; 
 
    padding: 5px; 
 
    white-space: nowrap; 
 
} 
 
.element:first-child { 
 
    border-left-style: solid; 
 
    border-radius: 5px 0 0 5px; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <div class="element">iPhone </div> 
 
    <div class="element">Buy an iPhone now!</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="element">Airport Express </div> 
 
    <div class="element">Buy an Airport Express now!</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="element">iPad </div> 
 
    <div class="element">Buy an iPad now!</div> 
 
    </div> 
 
</div>

Answer 2

Non è possibile farlo con il flexbox. Le dimensioni non possono essere equallizzate tra elementi che non condividono un genitore.

Ma si può con tabelle CSS

.row { 
 

 
    display: table-row; 
 

 
} 
 

 
.element { 
 

 
    display: table-cell; 
 

 
    border: 1px solid grey; 
 

 
    padding: 8px; 
 

 
}

<div class="row"> 
 
    <div class="element">iPhone</div> 
 
    <div class="element">Buy an iPhone now!</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element">Airport Express</div> 
 
    <div class="element">Buy an Airport Express now!</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element">iPad</div> 
 
    <div class="element">Buy an iPad now!</div> 
 
</div>