Question

我一直在尝试使用Flexbox创建一个3列布局，其中块的高度相等。在下面的第一张图中，显示了预期的行为（具有讽刺意味的是，它仅适用于IE11）。在Microsoft Edge，Chrome和Firefox中，输出如第二张图所示，这不是我想要完成的。

在浏览Stackoverflow和Google之后，我似乎无法找到问题的解决方案。如果有人能够在出现问题的地方帮助我，那将非常感激！

JSFiddle：http://jsfiddle.net/uyvhrjjb/1/

CSS：

#threeblocks {
    width: 100%;
    overflow: hidden;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}


#threeblocks .block {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 30%;
    margin: auto;
    border: 1px solid #B8B8B8;  
}

HTML：

<div id="threeblocks">
    <div class="block" style="text-align: center">
        <p><strong>Title 1</strong></p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, lorem nec vestibulum fermentum, massa magna efficitur augue, sed fermentum ligula eros sit amet eros.</p>
    </div>

    <div class="block" style="text-align: center">
        <p><strong>Title 2</strong></p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, lorem nec vestibulum fermentum, massa magna efficitur augue, sed fermentum ligula eros sit amet eros. Mauris est velit, scelerisque eu libero ac, bibendum consequat neque. Integer sed ligula sed erat rhoncus bibendum. Donec eget tortor dui. Vestibulum ex dui, consectetur a iaculis vestibulum, eleifend ut nibh. Nullam a ultrices dui. Sed sit amet augue euismod, vehicula leo id, convallis orci.</p>
    </div>

    <div class="block" style="text-align: center">
        <p><strong>Title 3</strong></p>

         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, lorem nec vestibulum fermentum, massa magna efficitur augue, sed fermentum ligula eros sit amet eros.</p>
    </div>

</div>

Answer 1

您可以移除项目的边距并且可以正常工作

tick_sched_do_timer()

      #threeblocks {
    width: 100%;
    overflow: hidden;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#threeblocks .block {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 30%;
    border: 1px solid #B8B8B8;  
}

Answer 2

从规则中删除保证金：自动：#threeblocks .block

Flexbox等高不起作用

2 个答案: