Firefox上的引導行 - flexbox不會破壞到新行

我有一個使用flex模式的佈局。在Chrome和Safari中都很好，但是在Firefox和IE中它看起來相當糟糕。這是我的html：Firefox上的引導行 - flexbox不會破壞到新行

<div ng-repeat="section in categorySections" class="row-flex row-flex-wrap"> 
    <div class="flex-col lesson-section col-md-12"> 
     <h2>{{ section.title }}</h2> 
     <p>{{ section.description }}</p> 
    </div> 
    <div ng-repeat="lesson in section.lessons" class="col-md-3"> 
     <div class="panel flex-col"> 
      <div class="panel-title"> 
       <h3>{{ lesson.title }}</h3> 
       <small>{{ lesson.date }}</small> 
      </div> 
      <div class="panel-body flex-grow"> 
       <p>{{ lesson.shortDescription }}</p> 
      </div> 
      <div class="panel-footer"> 
       <a href="#/chords/{{ lesson.id }}"><i class="fa fa-angle-right"></i> Continue</a> 
      </div> 
     </div> 
    </div> 
</div>

而CSS：

.row-flex, .row-flex > div[class*='col-'] { 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
flex:1 1 auto; 
} 

.row-flex-wrap { 
    -webkit-flex-flow: row wrap; 
    align-content: flex-start; 
    flex:0; 
} 

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] { 
    margin:-.2px; /* hack adjust for wrapping */ 
} 

.container-flex > div[class*='col-'] div, .row-flex > div[class*='col-'] div { 
    width:100%; 
} 

.flex-col { 
    display: flex; 
    display: -webkit-flex; 
    flex: 1 100%; 
    flex-flow: column nowrap; 
} 

.flex-grow { 
    display: flex; 
    -webkit-flex: 2; 
    flex: 2; 
}

，這是它的外觀在Firefox：

該卡應該是在標題之下，而不是在頁面右側。

有沒有人幫助我我做錯了什麼？

來源

2016-07-22 photoscene

嗨！我沒有測試Firefox，但可以嘗試添加'display：block'，'display：inline-block'，'width：100％'並且類似於不行爲的元素。這些是在使用Flex時在IE和Chrome中解釋不同的典型屬性。 –

根據我的經驗，如果Firefox和Chrome中出現問題，Chrome就會出現問題。當正確，錯誤並且可能是導致它正確顯示的錯誤時，Firefox幾乎不會提供問題和Chome。 – vsync

它看起來不起作用，因爲你在CSS和HTML類中造成了混亂......因爲你沒有提供任何我可以使用的演示頁面，所以很難在沒有實際測試的情況下提供修補程序 – vsync

{ 
    display:-moz-deck; 
    width:100%; 
}

來源

2016-07-25 06:49:13

謝謝，它工作:) – photoscene

Firefox上的引導行 - flexbox不會破壞到新行

回答

相關問題