CSS flex与table具有相同的行为

Question

我正在尝试使用flexbox来获得与表相同的行为。例如：

<div>
    <div class="flex row">
        <p>Short text</p>
        <p>Text </p>
    </div>

    <div class="flex row">
        <p>Very long text</p>
        <p>Text </p>
    </div>
</div>

如何让行与表格在同一垂直线上？

所以基本上我试图用flexbox

来实现以下结果

<table>
    <tr>
        <td>Short text</td>
        <td>Text</td>
    </tr>
    <tr>
        <td>Very long text</td>
        <td>Text</td>
    </tr>
</table>

Answer 1

根据HTML结构不使用flexbox。

如果您想要使用div的表行为，请使用CSS Tables。

比较你。

table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

td {
  border: 1px solid grey;
  padding: 1em;
  background: lightgreen;
}

.table {
  display: inline-table;
}

.row {
  display: table-row;
}

p {
  display: table-cell;
  padding: 1em;
  border: 1px solid grey;
  background: lightblue;
}

<table>
  <tr>
    <td>Short text</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Very long text</td>
    <td>Text</td>
  </tr>
</table>

<div class="table">
  <div class="row">
    <p>Short text</p>
    <p>Text </p>
  </div>

  <div class="row">
    <p>Very long text</p>
    <p>Text </p>
  </div>

  <div>

Answer 2

.row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.row p { width: 100% }

<div class="table">
  <div class="flex row">
    <p>Short text</p>
    <p>Text </p>
  </div>
  <div class="flex row">
    <p>Very long text</p>
    <p>Text </p>
  </div>
</div>