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等高不起作用

回答

相關問題