html - 使用 css 显示 3 个带有彼此相邻的标题的图形

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

将 flex-flow: column; 更改为 flex-flow: row; 或 flex-flow: row-reverse;