Flexbox - центр по горизонтали без flex-direction: колонка

Question

Flexbox - центр по горизонтали без flex-direction: колонка

Можно ли получить что-то похожее на картинку с помощью flex box? Я не могу отцентрировать правый div с помощью flex, и всегда получаю лево-правое в одном ряду и третье во втором.

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

1

css css3 flexbox centering

Источник

user2972087 08 янв '18 в 19:16

1 ответ

Решение

Другие вопросы по тегам css css3 flexbox centering

user3597276 08 янв '18 в 19:44 2018-01-08 19:44 · Accepted Answer · 2018-01-08 19:44

Вот один из методов: используйте 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>