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

Question

我想用 flexbox 创建一个 3 步解释组件。一个弹性项目应该包含一个 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>

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

标签： htmlcssflexbox

Answer 1

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