Html CSS Flexbox帮助，使项目在网格中对齐（图像、标题、文本）

我正在努力建立以下布局，如下图所示。。。目标是图像位于左侧，具有固定宽度。图像右侧的文本将相应对齐，并占据可用宽度

最后，目标是将这些项堆叠在网格中

我在使项目正确对齐时遇到问题，以下是我的问题：

。功能项{
背景：#CCC；
框大小：边框框；
宽度：100%；
填充：0px；
}
.功能项--包装器{
背景：#efef；
显示：内联块；
弯曲方向：行；
框大小：边框框；
宽度：336px；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
.img包装{
框大小：边框框；
宽度：88px；
右边填充：24px；
}
.img包装器，
img{
宽度：64px；
高度：64px；
}
.文本{
框大小：边框框；
填充顶部：24px；
填充底部：24px；
flex:1自动；
}

标题
这是一个句子描述，hello world。试试这个。您必须将flex设置为主容器，而不仅仅是儿童
.feature-items {
  background: #CCC;
  display: flex; /* changed */
  flex-flow: wrap;
  width: 100%;
  padding: 0px;
}

.feature-item--wrapper {
  background: #efefef;
  display: flex; /* added */
  flex-direction: row;
  box-sizing: border-box;
  width: 336px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
}

.img-wrapper,
img {
  width: 64px;
  height: 64px;
}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
}  

试试这个。您必须将flex设置为主容器，而不仅仅是儿童

.feature-items {
  background: #CCC;
  display: flex; /* changed */
  flex-flow: wrap;
  width: 100%;
  padding: 0px;
}

.feature-item--wrapper {
  background: #efefef;
  display: flex; /* added */
  flex-direction: row;
  box-sizing: border-box;
  width: 336px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
}

.img-wrapper,
img {
  width: 64px;
  height: 64px;
}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
}  

到
.feature items
和
.feature item--wrapper
添加显示灵活性


。功能项{
背景：#CCC；
框大小：边框框；
宽度：100%；
填充：0px；
显示器：flex；
柔性包装：包装；
}
.功能项--包装器{
背景：#efef；
弯曲方向：行；
框大小：边框框；
宽度：50%；
对齐项目：居中；
证明内容：中心；
显示器：flex；
}
.img包装{
框大小：边框框；
宽度：88px；
右边填充：24px；
}
.img包装器，
img{
宽度：64px；
高度：64px；
}
.文本{
框大小：边框框；
填充顶部：24px；
填充底部：24px；
flex:1自动；
}

标题
这是一个句子描述，hello world
标题
这是一个句子描述，hello world
标题
这是一个句子描述，hello world
标题
这是一个句子描述，hello world
到
。功能项
和
。功能项--包装器
添加显示弹性


。功能项{
背景：#CCC；
框大小：边框框；
宽度：100%；
填充：0px；
显示器：flex；
柔性包装：包装；
}
.功能项--包装器{
背景：#efef；
弯曲方向：行；
框大小：边框框；
宽度：50%；
对齐项目：居中；
证明内容：中心；
显示器：flex；
}
.img包装{
框大小：边框框；
宽度：88px；
右边填充：24px；
}
.img包装器，
img{
宽度：64px；
高度：64px；
}
.文本{
框大小：边框框；
填充顶部：24px；
填充底部：24px；
flex:1自动；
}

标题
这是一个句子描述，hello world
标题
这是一个句子描述，hello world
标题
这是一个句子描述，hello world
标题
这是一个句子描述，hello world
这些样式适合我（稍加修改）。
在HTML部分，使用结束“p”标记检查它是否未正确关闭

.feature-items {
  background: #CCC;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
}

.feature-item--wrapper {
  background: #efefef;
  display: inline-block; 
  flex-direction: row;
  box-sizing: border-box;
  width: auto;/* changed */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
    display: inline-block;/* added*/
}

.img-wrapper,img {width: 64px;height: 64px;}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
    display: inline-block;/* added*/
}

这些风格适合我（稍加修改）。
在HTML部分，使用结束“p”标记检查它是否未正确关闭

.feature-items {
  background: #CCC;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
}

.feature-item--wrapper {
  background: #efefef;
  display: inline-block; 
  flex-direction: row;
  box-sizing: border-box;
  width: auto;/* changed */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
    display: inline-block;/* added*/
}

.img-wrapper,img {width: 64px;height: 64px;}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
    display: inline-block;/* added*/
}

IMO Flexbox并不是这样做的最佳工具，因为它最初设计用于在一个方向（水平或垂直）对齐项目。使用CSS网格构建一个4 x 4网格，然后使用Flexbox将项目水平放置在“feature item wrapper”div中更为合理。请参见以下内容：

    body {

    width: 50%;          /*   reduces available width so that */
    margin: 0 auto;      /*   items take up two rows. margin centers everthing */
    }

    .feature-items {
      display: grid;
      grid-template-columns: repeat(auto-fill,minmax(300px, 1fr)); /* minimum and max column width */
      grid-gap: 20px; /* seperates each grid item */
    }

    .feature-item--wrapper {
      background: #efefef;
      display: flex;
      width: 100%;
    }

    .img-wrapper img {
      padding-top: 20px;
      width: 64px;
      height: 64px;
    }

    .text {
      text-align: left;
      padding: 20px;
    }

给出的顶部答案（您似乎已标记为正确）在较小的设备上无法成功地将网格项堆叠在彼此的顶部。为了使它们堆叠，我为列设置了一个最小宽度，当窗口达到设置的宽度时，该宽度将强制堆叠。还要注意，传统浏览器不支持CSS网格

希望这能有所帮助：）
IMO Flexbox并不是这样做的最佳工具，因为它最初设计用于在一个方向（水平或垂直）对齐项目。使用CSS网格构建一个4 x 4网格，然后使用Flexbox将项目水平放置在“feature item wrapper”div中更为合理。请参见以下内容：

    body {

    width: 50%;          /*   reduces available width so that */
    margin: 0 auto;      /*   items take up two rows. margin centers everthing */
    }

    .feature-items {
      display: grid;
      grid-template-columns: repeat(auto-fill,minmax(300px, 1fr)); /* minimum and max column width */
      grid-gap: 20px; /* seperates each grid item */
    }

    .feature-item--wrapper {
      background: #efefef;
      display: flex;
      width: 100%;
    }

    .img-wrapper img {
      padding-top: 20px;
      width: 64px;
      height: 64px;
    }

    .text {
      text-align: left;
      padding: 20px;
    }

给出的顶部答案（您似乎已标记为正确）在较小的设备上无法成功地将网格项堆叠在彼此的顶部。为了使它们堆叠，我为列设置了一个最小宽度，当窗口达到设置的宽度时，该宽度将强制堆叠。还要注意，传统浏览器不支持CSS网格

希望这对您有所帮助：）
您使用或希望使用flexbox而不是CSS网格布局将项目对齐到网格中是否有特定原因？您使用或希望使用flexbox而不是CSS网格布局将项目对齐到网格中是否有特定原因？