Показать 3 рисунка с подписями рядом друг с другом, используя CSS

Question

У меня есть 3 цифры с подписями.Я хочу, чтобы они были выровнены по горизонтали в середине страницы, рядом, но все, что я могу получить, это три вертикальных.Используя только HTML5 и CSS, как мне это сделать?

Вот мой HTML:

    <div class="row">
        <figure>
            <img src="person-3593657_960_720.jpg" alt="Run">
            <figcaption>Running</figcaption>
        </figure>
        <figure>
            <img src="people-2581913_1280.jpg" alt="Shopping">
            <figcaption>Shopping</figcaption>
        <figure>
            <img src="family-2609528_640.jpg" alt="people jumping in air">
            <figcaption>Spending time with friends & family</figcaption>
        </figure>
    </div>

Вот мой CSS:

    .row figure {
        display: flex;
        flex-flow: column;
        padding: 5px;
    }

   .row figure img {
       margin:auto;
       padding:auto;
       width: 30%;
       box-shadow: rgb(101, 101, 101) 10px 10px 25px; 
   }

   .row figure figcaption {
       color: rgb(19, 7, 122);
       font: italic smaller sans-serif;
       padding: 3px;
       text-align: center;
   }

Answer 1

Отсутствует закрывающий тег, который является одной из причин, по которой вы не смогли достичь того, чего хотели

Я использую display: flex и неявно упоминаю flex-direction: row (необязательно), чтобы расположить фигуры по горизонтали, и указав width: 100%;, он займет всю ширину (100%) контейнера;в этом случае элемент тела.

justify-content: center будет центрировать содержимое div.

.row {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
}

figure {
  margin: 0;
  margin-right: 20px;
  /*
  The below properties are demo purpose. Feel free to change it to fit your needs. 
  */
  width: 100px;
  height: 100px;
  background: blue;
}

<div class="row">
  <figure>
    <img src="person-3593657_960_720.jpg" alt="Run">
    <figcaption>Running</figcaption>
  </figure>
  <figure>
    <img src="people-2581913_1280.jpg" alt="Shopping">
    <figcaption>Shopping</figcaption>
  </figure>
  <figure>
    <img src="family-2609528_640.jpg" alt="people jumping in air">
    <figcaption>Spending time with friends & family</figcaption>
  </figure>
</div>

Answer 2

Изменить flex-flow: column; на flex-flow: row; или flex-flow: row-reverse;