Bootstrap flexbox 相同宽度的子项

Question

我有一个 flex box 容器，其中的子项显示在一个 flex-row 中。我正在尝试使用引导程序并使所有孩子的宽度和高度相同。

HTML

<div class="d-flex flex-row flex-grow">
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book-heart fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Procedures.aspx">Procedures</a></p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white">​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/KB/Forms/Quick%20Reference%20Guides.aspx">Quick Reference Guides</a> </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="http://helpdesk:8080/Templates.do?module=mergedRequest&amp;serviceId=3002">Stan​dardized
                Forms</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-user fa-2x color-white">​​​​​​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Member%20Forms.aspx">Member Forms</a>​​​​​​​​​ </p>
    </div>
</div>
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-link fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/Lists/Links/AllItems.aspx">Canvas Links</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/RatesFees/Forms/Rates%20and%20Fees.aspx">Deposit and Loan
                Rates</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">&#160;<a href="/compass/Policies/Forms/Policies.aspx">Policies</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-download fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3"><a href="/compass/#ByTopicAnchor">More</a>​​</p>
    </div>
</div>

这是它目前的样子。您可以看到存款和贷款利率框比更多框更宽：

Answer 1

为所有孩子添加，这个：

 flex: 1 1 0;