Css 使用Flexbox将一个div放置在另一个div下面

我有这样的想法：

HTML:

//CSS

我是flexbox的新手。 我怎样才能使元素刚好在下面

我试图找到一个解决方案，但它在flexbox中对我来说是严重扭曲的（目前）。有什么想法吗

编辑：

不带弯曲方向：立柱

带弯曲方向：列

---

对于

flex

容器（

.root

），需要将

flex direction

属性设置为

列

）

您可以找到一个JSFIDLE示例

编辑：

---

将

align items:center

更改为

align items:flex start

要使元素向左对齐

您需要为

flex

容器（

.root

）将

flex direction

属性设置为

列

您可以找到一个JSFIDLE示例

编辑：

---

将

align items:center

更改为

align items:flex start

，以便元素向左对齐

非常感谢！非常感谢你！由于绝对定位在不同浏览器之间工作不一致，标记中的

图标

在哪里，其

对齐项目：居中

假定位于容器上，而不是flex项，那么它是否包含您需要水平居中的内容？因为绝对定位在不同浏览器之间工作，标记中的

图标和它的
对齐项：居中
假定位于容器上，而不是flex项上，那么它是否包含您需要水平居中的内容？
<ListElementRoot>
  <ListElementText>
    {children}
  </ListElementText>
  <ListElementDescription>
    {description}
  </ListElementDescription>
</ListElementRoot>

export const ListElementRoot = div(style.root)
export const ListElementIcon = div(style.icon)
export const ListElementText = div(style.text)
export const ListElementDescription = div(style.description)

.root {
  display: flex;
  width: 100%;
  height: 56px;
  align-items: center;
  border-top: 1px solid var(--color-gray2);
  padding: 0;
}

.icon {
  position: absolute;
  width: 28px;
  height: 28px;
  align-items: center;
  padding-left: 18px;
}

.text {
  color: #000;
  font-size: calc(var(--font-size-body) / 10)rem;
  padding-left: 64px;
}

.description {
  color: #000;
  font-size: calc(var(--font-size-body) / 12.3)rem;
  padding-left: 64px;
}