正确定位嵌套的flexbox div

Question

我正在尝试使用看起来像这样的flexbox实现一个结构：

但截至目前，我所取得的成就如下：

也就是说，我无法将嵌套div中的文本显示在左对齐的图像下方;

以下是相关的HTML：

.page {
  display: flex;
  flex-wrap: wrap;
}


.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-1 {
  display: flex;
  flex-direction: row;
  background-color: #F5CF8E;
  align-items: flex-start;
  justify-content: flex-start;


}
.feature-1-content{
  align-items: center;

}

.feature-1 img{

  padding: 5px;
  border-radius: 50%;
}

这是相关的CSS：

lookup1 x [] = []
lookup1 x (h:t) = if x == fst h then snd h else lookup1 x t

如何根据我的要求定位feature-1 div的图像和文本？

Answer 1

将flex-direction: row中的.feature-1更改为flex-direction: column，它们将垂直堆叠。

Answer 2

您还需要将flex-wrap: wrap添加到嵌套的Flex容器中。

如果图片和文字元素的父级未设置为wrap，则子元素将显示在一行中。