Как правильно оформить элемент flexbox

Question

Я хотел создать трехэтапный компонент объяснения с flexbox.Элемент 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>