Html 如何使用flexbox均匀排列三个相邻的p元素

我在做三个挨着的盒子。每个框都有一个图像+标题+文本。 第一个框包含一个带有两个单词的标题。缩小浏览器时，框2和框3中的p内容排列得比框1高

我使用的代码是：

<section id="boxes">
    <div class="container">
        <div class="box">
            <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
            <h3>HTML 5 Website</h3>
            <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
        </div>
        <div class="box">
            <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
            <h3>Webbie</h3>
            <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
        </div>
        <div class="box">
            <img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
            <h3>Informatie</h3>
            <p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
        </div>
    </div>
</section>

jsfiddle：

---

如何在3个框中均匀排列p元素的顶部。

您可以使用

上的
对齐内容：间隔


#盒子。容器{
显示器：flex；
最大宽度：900px；
}
.盒子{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.box img{
最大宽度：100%；
flex:0自动；
}
.框h3{
flex:1自动；
}
.方框p{
flex:01自动；
}

HTML5网站
库拉比图尔·波特提托·梅图斯·奥迪奥，弗林利亚·比本杜姆·福西布斯·奎斯。C

韦比
库拉比图尔·波特提托·梅图斯·奥迪奥，弗林利亚·比本杜姆·福西布斯·奎斯。C

信息
库拉比图尔·波特提托·梅图斯·奥迪奥，弗林利亚·比本杜姆·福西布斯·奎斯。C

是否尝试将
文本对齐：居中
用于
h3
和
p
标记？无法正常工作我得到以下信息：
#boxes .container {
    display: flex;
    max-width: 900px;
}

.box {
    display: flex;
    flex-direction: column;
}


.box img {
    /*prevents image from being larger than it's container, but doesn't stretch it if it's smaller than the container*/
    /*if you had a 20x20px image, then it would not get stretched to match the container's width, but it would stay 20x20px. Whereas a 2000x2000px image would get scaled down to fit the container*/
    max-width: 100%;
}