使用 Flexbox 将一个 div 放在另一个 div 下方

Question

我有这样的标记：

HTML：

<ListElementRoot>
  <ListElementText>
    {children}
  </ListElementText>
  <ListElementDescription>
    {description}
  </ListElementDescription>
</ListElementRoot>

//平台.web.js

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

//CSS

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

我是 flexbox 的新手。我怎样才能让元素刚好在 ?

我正在尝试找到一个解决方案，但它在 flexbox 中对我来说严重扭曲（目前）。有任何想法吗？

编辑：

没有 flex-direction: column;

使用flex-direction: column;

Answer 1

您需要为容器 ( )flex-direction设置一个属性。columnflex.root

在这里您可以找到一个 jsfiddle 示例。

编辑：更改align-items: center为align-items: flex-start使元素向左对齐