CSS使卡具有相同的高度运行和引导

我在React中使用引导4。目前，项目1的卡片比项目2短，但我希望两张卡片的高度相同

我希望将来有更多的卡片添加到底部

我的CSS文件：

.CountryDetail {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 15%;
    margin-right: 15%;
}

.cards {
    background: #fcfcfc;
    margin: 20px 40px;
    transition: 0.4s all;
    width: 800px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}

.icon-size {
    font-size: 50px;
}

.shadow-1 {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    box-sizing: border-box;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
}

.shadow-1:hover {
    z-index: 1;
    box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    transition: all 0.5s ease;
}

.vertical-center {
    justify-content: center;
}

.show-hover {
    opacity: 0;
    transform: translateX(-20px);
    transition: 1s all;
}

.cards:hover .show-hover {
    opacity: 1;
    transform: translateX(0px);
    color: blue;
}

.vertical-align {
    display: flex;
    align-items: center;
}

我的JavaScript文件：

<div className="CountryDetail">
    <div className="cards shadow-1 container">
        <div className="row vertical-align">
            <div className="col-2 text-center">
                <FontAwesomeIcon className="icon-hover icon-size" icon={faPlane} color="#A9A9A9" />
            </div>
            <div className="col-8">
                <h3>Item 1</h3>
            </div>
            <div className="col-2 text-center">
                <FontAwesomeIcon className="show-hover icon-size" icon={faArrowRight} color="#A9A9A9" />
            </div>
        </div>
    </div>

    <div className="cards shadow-1 container">
        <div className="row vertical-align">
            <div className="col-2 text-center">
                <FontAwesomeIcon className="icon-hover icon-size" icon={faHeart} color="#A9A9A9" />
            </div>
            <div className="col-8">
                <h3>Item 2</h3>
                <span>Under Construction...</span>
                <h2>Testing</h2>
            </div>
            <div className="col-2 text-center">
                <FontAwesomeIcon className="show-hover icon-size" icon={faArrowRight} color="#A9A9A9" />
            </div>
        </div>
    </div>
</div>

我会得到这个：

---

根据您对相同高度和居中内容的需求，将CSS更新为：

.cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
    background: #fcfcfc;
    margin: 20px 40px;
    transition: 0.4s all;
    width: 800px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}

---

如果您将卡设置为“显示弹性”（display flex），因为您只有一个直接子项（

行

），您可以将其垂直居中。

因为这些卡不在同一“行”上，您必须为卡设置高度。我建议您创建一张包含您认为最多信息的卡片，然后在所有具有该值的卡片上设置

min height

——或者，您可以使用JS获得最高的卡片，并将所有卡片的高度设置为该值。我尝试了您建议的方法。我仍然无法得到我想要的结果。我添加了更新。您希望发生什么？您希望得到什么结果？我希望所有卡片（矩形框）的高度相同，并且这些框内的内容垂直居中。

.cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
    background: #fcfcfc;
    margin: 20px 40px;
    transition: 0.4s all;
    width: 800px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}