Flex how to display table of item that stay aligned vertically

Question

I am working on a website, and this page is the one where I display all the orders the user have.

Here is a JSFiddle Containing all the code.

.flex {    
     display: flex;
}
.flex-i {
     color: white;
     background-color: blue;
     padding: 20px;
     flex-grow: 1;
     border: 5px solid red;
     text-align: center;
}
.flex-i:first-child {
     border-right: 0;
     flex-grow: 3;
}
.flex-i:last-child {
     border-left: 0;
     flex-grow: 3;
}

<div class="flex">
     <div class="flex-i">#ord00000376sufdiwnfgw</div>
     <div class="flex-i">11:54:02, 03-12-2018l</div>
     <div class="flex-i">2824,89€</div>
</div>

<div class="flex">
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
</div>

<div class="flex">
     <div class="flex-i">#ord00000372suf</div>
     <div class="flex-i">11:32:24, 03-12-2018</div>
     <div class="flex-i">24,71€</div>
</div>

So the problem I have it that I would like to display them all but vertically Align

I want for instance the Price Part to always have the same size, and all the column to have the same sizes to do not display badly as is it actually. BUT keep it mind that the first column order number must be bigger than the date for instance

I think you're going to have to give them all the same flex-basis. Why not put the data in a table? — Maciek Semik, Dec 04 '18 at 14:28
the usual thing would be to give the money column a rem width to cover the largest amount you think is possible (or that someone will reasonably be able to spend), same with the date column and then just let the other column grow to fill the remainder, but as one of the answers says, this is tabular data so why not just use a table and then that will calculate cell widths based on their content and seems to be just what you are after — Pete, Dec 04 '18 at 14:35

score 2 · Answer 1 · answered Dec 04 '18 at 14:31

2

Honestly, I think you're using css flex for the wrong reasons here. It's better you use a table like so:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

answered Dec 04 '18 at 14:31

Maciek Semik

1,872
23
43

Thank you for your answer ! The condition was to use flexbox so it does not suit my request, but I keep it in mind for the next times ! – Ced Dec 04 '18 at 15:53

Plastic · Accepted Answer · 2018-12-04T15:28:21.277

1

Just by adding a minimum flex-basis to the main class it seems to look better

EDIT

note the use of word-wrap: break-word;

.flex {    
 display: flex;
position: relative;
}
.flex-i {
 color: white;
 background-color: blue;
 padding: 20px;
 flex-grow: 1;
 border: 5px solid red;
 text-align: center;
 flex-basis: 33%;
  
}
.flex-i:first-child {
 border-right: 0;
 flex-grow: 3;
 word-wrap: break-word;
 max-width: 25%;
 
}
.flex-i:last-child {
 border-left: 0;
 flex-grow: 3;
}

<div class="flex">
     <div class="flex-i">#ord00000376sufdiwnfgw</div>
     <div class="flex-i">11:54:02, 03-12-2018l</div>
     <div class="flex-i">2824,89€</div>
</div>

<div class="flex">
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
     <div class="flex-i">Just Normal</div>
</div>

<div class="flex">
     <div class="flex-i">#ord00000372suf</div>
     <div class="flex-i">11:32:24, 03-12-2018</div>
     <div class="flex-i">24,71€</div>
</div>

edited Dec 04 '18 at 15:28

answered Dec 04 '18 at 14:32

Plastic

9,874
6
32
53

Thank you for your answer, the Idea is good but I have a problem, if I add a loooooonger name into any `order number` it breaks the vertical alignment – Ced Dec 04 '18 at 14:51
How it has to behave in that case? horizzontal scroll? overflow-hidden? text ellipsis? – Plastic Dec 04 '18 at 15:03
Return to the line because the size must not change – Ced Dec 04 '18 at 15:18
1

I updated my answer, you can use `word-wrap: break-word;` and set a fixed width to leverage on Flex – Plastic Dec 04 '18 at 15:29
Interesting thank you, I will try it online and give you feedback asap – Ced Dec 04 '18 at 15:32

Flex how to display table of item that stay aligned vertically

2 Answers2