Html Firefox中的Flexbox

我一直在构建一个网站，并一直在试验

display:flex

，并且在实现我认为足够好的拇指指甲块元素方面取得了一些成功

然而，在Firefox中，它做到了这一点：

我已经测试过了，使用

display:flex

和

position:absolute

似乎有问题

我读到Firefox对待绝对定位的方式与我测试过的其他浏览器不同

• 铬
• 边缘
• 歌剧院

我在以下方面也遇到过类似的问题：

• Internet Explorer 11
• Safari 5.1.7
• 火狐50.1.0

HTML

<section id="services" class="text-center center-block">
    <div class="container">
        <div class="row">
            <!-- Block -->
            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="thumbnail grey mb-30">
                    <img src="img/picto/originals/png/Pound/Newable_Pictogram_CoolGrey_POUND.png" width="156" height="200" alt="" />
                    <div class="caption">
                        <p class="bold">Attractive commissions for business introductions, paid promptly.</p>
                    </div>
                </div>
            </div>
            <!-- Block -->
            <!-- Block -->
            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="thumbnail grey mb-30">
                    <img src="img/picto/originals/png/Arrows/Newable_Pictogram_Navy_ARROWS.png" width="200" height="199" alt="" />
                    <div class="caption">
                        <p class="bold">We’re committed to delivering fast, and treating you and your clients fairly.</p>
                    </div>
                </div>
            </div>
            <!-- Block -->
            <!-- Block -->
            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="thumbnail grey mb-30">
                    <img src="img/picto/new/Newable_Pictogram_Navy_GROWTH.png" width="271" height="200" alt="" />
                    <div class="caption">
                        <p class="bold">We are a trusted, long established and large-scale Responsible Finance Provider.</p>
                    </div>
                </div>
            </div>
            <!-- Block -->
            <!-- Block -->
            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="thumbnail grey mb-30">
                    <img src="img/picto/new/Newable_Pictogram_cool_grey_PARTNER.png" width="200" height="200" alt="" />
                    <div class="caption">
                        <p class="bold">Incentive-led schemes to promote long term business development partnership.</p>
                    </div>
                </div>
            </div>
            <!-- Block -->
            <!-- Block -->
            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="thumbnail grey">
                    <img src="img/picto/originals/png/Speech Bubbles/Newable_Pictogram_CoolGrey_SPEECHBUBBLES.png" width="263" height="200" alt="" />
                    <div class="caption">
                        <p class="bold">Best in class broker support package including dedicated account manager.</p>
                    </div>
                </div>
            </div>
            <!-- Block -->
            <!-- Block -->
            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="thumbnail grey">
                    <img src="img/picto/originals/png/Infinity/Newable_Pictogram_Navy_INFINITY.png" width="215" height="100" alt="" />
                    <div class="caption">
                        <p class="bold">We partner with finance brokers, financial advisors, High Street banks, solicitors and accountants.</p>
                    </div>
                </div>
            </div>
            <!-- Block -->
        </div>
    </div>
</section>

---

我是否只是错误地使用了

display:flex

？

检查您场景的这个基本示例（注释

。标题
填充
只是为了让它更清楚）：


增加了
flex-flow:column-wrap至
。缩略图



div.缩略图{
边界：无；
最小高度：500px；
位置：相对位置；
显示：-webkit flex；
显示器：flex；
柔性流：柱包裹；
证明内容：中心；
对齐项目：居中；
}
.缩略图像{
填充顶部：0；
最大高度：50%；
最大宽度：50%；
/*垫底：25%*/
}
.标题{
/*位置：绝对位置*/
/*底部：0*/
最大宽度：50%；
保证金：0自动；
}

吸引人的业务介绍佣金，及时支付
我发现问题越好，答案就越好……不仅仅是堆栈溢出：）可能重复：
.thumbnail {
    border: none;
    min-height: 500px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.thumbnail img {
    padding-top: 0;
    max-height: 50%;
    max-width: 50%;
    padding-bottom: 25%;
}
.caption {
    position: absolute;
    bottom: 0;
}