Flexbox - 水平居中，没有弯曲方向：列

Question

有可能在弹性盒子的图片上得到类似的东西吗？我不能使用flex来居中右边div，并且总是在同一行中左右，在第二行中是第三行。

  .table-area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .table-item{
    border: 1px solid red;
    background: gray;
    flex-basis: 40%;
  }

<div class="table-area">
    <div class="table-item">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
    <div class="table-item">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
    <div class="table-item">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
</div>

Answer 1

以下是一种方法：将transform属性与translate函数一起使用。

.table-area {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.table-item {
  border: 1px solid red;
  background: gray;
  flex-basis: 40%;
}

.table-item:nth-child(2) {
  transform: translateY(50%);
}

<div class="table-area">
  <div class="table-item">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
  </div>
  <div class="table-item">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
  </div>
  <div class="table-item">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
  </div>
</div>