Flexbox

Question

有没有可能用flex box得到类似图片的东西？我不能用 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>

Flexbox - 水平居中，没有 flex-direction: column

Flexbox - center horizontally without flex-direction: column

css

centering