Flex 如何显示保持垂直对齐的 table 个项目

Question

我在一个网站上工作，这个页面是我显示用户所有订单的页面。

这是一个JSFiddle包含所有代码的

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

所以我遇到的问题是我想将它们全部显示但垂直对齐

例如，我希望 Price 部分始终具有相同的大小，并且所有列都具有相同的大小，这样就不会像实际情况那样显示不佳。但请记住，第一列 order number 必须大于日期

Answer 1

老实说，我认为您在这里使用 css flex 的原因不对。最好像这样使用 table：

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

Answer 2

只需在主 class 中添加一个最小的 flex-basis 看起来更好

编辑

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

Flex 如何显示保持垂直对齐的 table 个项目

Flex how to display table of item that stay aligned vertically

html

css

flexbox

flex-grow