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

Question

我想用flexbox创建一个3步解释组件。 一个弹性项目应该包含一个img和一点点文本，它应该位于图像的下一个（水平）。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何人都可以帮助我如何获得彼此相邻的每个flexitem的图像和文本。或者告诉我谷歌的关键词是什么。

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>

Answer 2

也将flex-item设置为display:flex。 Flexbox不是继承的。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;