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

Question

我有这样的标记：

HTML：

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

// platform.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：列;

Answer 1

您需要为flex-direction容器（column）设置flex属性为.root。

Here你可以找到一个jsfiddle例子。

修改： 将align-items: center更改为align-items: flex-start，以使元素与左侧对齐