如何以正确的方式设置 flexbox 项目的样式

Question

我想用 flexbox 创建一个 3 步解释组件。 一个 flex 项目应该包含一个 img 和一些文本，它们应该位于图像旁边（水平）。

到目前为止我尝试的是这种方法

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border: 1px solid black;
  box-sizing: border-box;
  box-align: center;
  align-content: center;
}

.flex-item {
  width: 33.33%;
}

<div class="flex-container">

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>1.</strong> first step</p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>2.</strong> second step
    </p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>3.</strong>third steps
    </p>
  </div>

</div>

谁能帮助我如何让每个弹性项目的图像和文本彼此相邻。或者告诉我关键字是什么来谷歌它。

Answer 1

也将flex-item 设置为display:flex。 Flexbox 没有被继承。

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border: 1px solid black;
  box-sizing: border-box;
  align-content: center;
}

.flex-item {
  width: 33.33%;
  display: flex;
}

img {
  display: block;
}

<div class="flex-container">

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>1.</strong> first step</p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>2.</strong> second step
    </p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>3.</strong>third steps
    </p>
  </div>

</div>

Answer 2

.flex-item {
     display: flex;
}

应该可以。

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border: 1px solid black;
  box-sizing: border-box;
  box-align: center;
  align-content: center;
}

.flex-item {
  width: 33.33%;
  display: flex;
}

<div class="flex-container">

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>1.</strong> first step</p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>2.</strong> second step
    </p>
  </div>

  <div class="flex-item">
    <picture>
      <img class="img-fluid" src="https://dummyimage.com/150x150/000/fff" alt="">
    </picture>
    <p>
      <strong>3.</strong>third steps
    </p>
  </div>

</div>