Flexbox等高不起作用

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

环顾了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>

来源

2015-10-05 Dennis Ameling

您可以删除的项目的利润率和它的作品

http://jsfiddle.net/uyvhrjjb/4/

 #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; 
}

来源

2015-10-05 11:36:40

为什么保证金回事？ –

非常感谢！当天的英雄;）与@JuanMendes实际上一样的问题。 –

由于Flexbox在后台应用自己的边距。一般来说，Flexbox的布局作为一个框架工作，它独立于其余的布局。当div有柔性显示时，它们内部的所有内容都会改变。您可以应用边距，但会使布局崩溃。 –

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

来源

2015-10-05 11:33:51 Grissom

Flexbox等高不起作用

回答

相关问题