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更靠近顶部。

我通过创建两行或三列来解决此问题。因此，现在一切都在桌面上对齐了。（第一行上面有css：align-items: center;display:flex;）

第1行：图像垂直居中的A B C 第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将容器定义为flex。看一下这个例子。

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

如何垂直订购Flexbox方向？

1 个答案: