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

【问题标题】：CSS Flexbox help, getting items to align in a grid (image, title, text)CSS Flexbox 帮助，让项目在网格中对齐（图像、标题、文本）
【发布时间】：2018-02-14 21:16:10
【问题描述】：

我正在构建如下图所示的布局...目标是图像位于左侧，宽度固定。图片右侧的文字会相应对齐并占用可用宽度。

最后，目标是这些项目堆叠成一个网格。

我在让项目正确对齐时遇到问题，这就是我所拥有的：

.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: 336px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

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

<div class="feature-items">
  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>
    
</div>

如果我做错了什么，任何帮助将不胜感激？谢谢

【问题讨论】：

您是否有特殊原因正在使用或想要使用 flexbox 而不是 CSS 网格布局来将项目对齐到网格中？

标签： html css flexbox

【解决方案1】：

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

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

.feature-item--wrapper {
  background: #efefef;
  flex-direction: row;
  box-sizing: border-box;
  width: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
}

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

<div class="feature-items">
  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

</div>

【讨论】：

【解决方案2】：

这些样式对我有用（稍作修改）。并且在 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*/
}

【讨论】：

【解决方案3】：

试试这个。您必须将 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;
}

【讨论】：

【解决方案4】：

IMO Flexbox 并不是处理此类事情的最佳工具，因为它最初设计用于在一个方向（水平或垂直）上对齐项目。使用 CSS Grid 构建 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 Grid。

希望这会有所帮助:)

【讨论】：