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

只是通过在主类中添加最小的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>

更改如何显示垂直对齐的项目表

2 个答案: