Geek Answers Handbook

CSS / Flexbox: Same width as largest element, e.g. columns

I created a list component for my application, I cannot use tables due to the style.

I want the elements inside the "rows" to have the same width from top to bottom, such as columns. The code looks something like this:

<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>

Currently it looks like this:

What does it look like

And this is what I want:

How it should look

Is there any way to do this?

+6
source share
2 answers

Use CSS tables:

  • Split between lines with border-spacing
  • Borders in cells. You can use border-radius to round them.
  • Pseudo-element displayed as a cell to fill the free space on the right
  • white-space: nowrap to prevent cells from shrinking due to a pseudo-element.

 .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>
+5
source

You cannot do this with flexbox. Dimensions cannot be equal between elements that do not share a parent.

But you can use CSS tables

 .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>
+4
source

More articles:


All Articles