如何更改我的图标布局以在 css 上弯曲答案

【问题标题】：how to change my icon layout to flex on css如何更改我的图标布局以在 css 上弯曲
【发布时间】：2022-02-14 03:07:29
【问题描述】：

我正在尝试将我的图标更改为 flex，但这没有用。这是我原来的 CSS 代码：

.recipe-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem;
  margin: 2rem 0;
  text-align: center;
}

我还尝试将 display 设置为 flex，将 justify-content 设置为 center 等等，但这也不起作用。我怎样才能解决这个问题？这是我的图标的 html 代码：

div class="recipe-icons">
            <article>
              <!-- single recipe icon -->
              <i class="fas fa-clock"></i>
              <h5>prep time</h5>
              <p>30 min.</p>
              <!-- single recipe icon -->
              <i class="far fa-clock"></i>
              <h5>cook time</h5>
              <p>15 min.</p>
              <!-- single recipe icon -->
              <i class="fas fa-user-friends"></i>
              <h5>servings</h5>
              <p>6 servings</p>
              <!-- recipe tags -->
              <div class="recipe-tags">
                Tags: <a href="tag-template.html">beef</a>
                <a href="tag-template.html">breakfast</a>
                <a href="tag-template.html">pancakes</a>
                <a href="tag-template.html">food</a>
              </div>
            </article>
</div>

【问题讨论】：

标签： javascript html css flexbox formatting

【解决方案1】：

我有另一种使用display: flex; 做类似事情的方法此外，您应该将元素包围在 div 中以对它们进行分组。工作示例https://jsfiddle.net/r5Lfcbh8/1/

HTML：

<article>
  <div class="recipe-icons">
    <div class="iconRow">
      <i class="fas fa-clock"></i>
      <h5>prep time</h5>
      <p>30 min.</p>
    </div>
    <div class="iconRow">
      <i class="far fa-clock"></i>
      <h5>cook time</h5>
      <p>15 min.</p>
    </div>
    <div class="iconRow">
      <i class="fas fa-user-friends"></i>
      <h5>servings</h5>
      <p>6 servings</p>
    </div>
  </div>
  <div class="recipe-tags">
    <span>Tags:</span>
    <a href="tag-template.html">beef</a>
    <a href="tag-template.html">breakfast</a>
    <a href="tag-template.html">pancakes</a>
    <a href="tag-template.html">food</a>
  </div>
</article>

还有css：

article, .recipe-icons, .recipe-tags {
  display: flex;
}

article {
  flex-direction: column;
}

.recipe-tags {
  margin-top: 10px;
}

.recipe-tags > * {
  margin-left: 5px;
}

.recipe-icons > .iconRow {
  flex: 1 1 auto;
  text-align: center;
}

.recipe-icons > .iconRow > * {
  margin: 5px 0;
}

【讨论】：