Flex, как отобразить таблицу элементов, которые остаются выровненными по вертикали - PullRequest
Новая
       17

Flex, как отобразить таблицу элементов, которые остаются выровненными по вертикали

0 голосов
/ 04 декабря 2018

Я работаю над сайтом, и на этой странице отображаются все заказы, которые есть у пользователя.

Вот 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 должен быть больше, чем дата, например

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Просто добавив минимальный изгиб к основному классу, он выглядит лучше

РЕДАКТИРОВАТЬ

обратите внимание на использование 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>
0 голосов
/ 04 декабря 2018

Честно говоря, я думаю, что вы используете 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>
...