как заказать направление flexbox по вертикали?

Question

Я использую flexbox на оболочке, и у меня есть 2 строки и 3 столбца, например:

A B C
1 2 3

Это более или менее проблема, с которой я столкнулся:

<div class="container">
        <div class="col col-1">
          <div class="title">
            <img src={"http://es.rockybytes.com/i/393/image.jpg"} />
          </div>
          <div class="content">1</div>
        </div>
        <div class="col col-2">
          <div class="title">
            <img
              src={
                "https://www.portalprogramas.com/imagenes/programas/es/704/6704_0.jpg"
              }
            />
          </div>
          <div class="content">2</div>
        </div>
        <div class="col col-3">
          <div class="title">C</div>
          <div class="content">3</div>
        </div>
      </div>

Буквы A, B, C - изображения разных размеров.Я фиксирую ширину, из-за которой ячейки чисел (1, 2 и 3) не выравниваются.

Например, если высота C равна половине высоты B, 3 будет ближе к вершине, чем2.

Я решил эту проблему, создав две строки по 3 столбца.Так что теперь все на рабочем столе.(в первой строке есть css: align-items: center;display:flex;)

Строка 1: Азбука с изображениями по центру вертикально Строка 2: 1 2 3: Они естественным образом начинаются сверху, здесь, как и предполагалось, выровнены

Проблема в том, что при переходе на мобильный телефон я получаю

A
B
C
1
2
3

Но я бы хотел иметь

A
1
B
2
C
3

В любом случае делать это только с помощью css?

Я делаю приложение по реакции: возможно сделать это с некоторыми условиями "isMobile" и создать 2 разные схемы.но было бы здорово сделать это, просто сконфигурировав css flexbox

РЕШЕНИЕ: я не смог сделать это с двумя строками, вместо этого я использовал одну строку и align-items: baseline, как предложено @subgeo

Answer 1

Определите ваш контейнер как гибкий с flex-flow: row wrap.Посмотрите на этот пример.

.container {
  display: flex;
  flex-flow: row wrap;
}

.col {
  width: 50px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-right: 3px;
}

.col-1 {
  background-color: #f99;
}

.col-2 {
  background-color: #9f9;
}

.col-3 {
  background-color: #99f;
}

<div class="container">
    <div class="col col-1">
        <div class="title">A</div>
        <div class="content">1</div>
    </div>
    <div class="col col-2">
        <div class="title">B</div>
        <div class="content">2</div>
    </div>
    <div class="col col-3">
        <div class="title">C</div>
        <div class="content">3</div>
    </div>
</div>