我的三列響應佈局不尊重flex訂單

我想使用flexboxes爲我的網站製作三列布局。我的三列響應佈局不尊重flex訂單

但是，我的'commentCaMarche'div似乎不遵循flex順序，它位於'details-index'列的頂部。你知道如何解決這個問題嗎？

#credits { 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    color: #FFFFFF; 
 
    height: 100vh; 
 
    background-color: #FB3D00; 
 
    margin-bottom: 0; 
 
} 
 

 
#columns { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
#details-index { 
 
    font-size: 1.6vmin; 
 
    text-align: center; 
 
    flex: 1; 
 
    order: 1; 
 
    display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/ 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
(...) 
 

 
#commentCaMarche { 
 
    font-size: 2vmin; 
 
    text-align: center; 
 
    flex: 1; 
 
    order: 2; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
(...) 
 

 
#sources { 
 
    font-size: 1.4vmin; 
 
    text-align: center; 
 
    flex: 1; 
 
    order: 3; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
}

<div id='credits'> 
 
    <div id='columns'> 
 
     <div id='commentCaMarche'> 
 
      <h2>Comment ça marche</h2> (...) 
 
     </div> 
 
     <div id='details-index'> 
 
      <h2>Le détail</h2> (...) 
 
     </div> 
 
     <div id='sources'> 
 
      <h2>Sources des données</h2> (...) 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-04-17 Tom Février

所以應該在哪裏了'commentCaMarche'是什麼？ ...看起來你是如何告訴它的，如果提到'order' – LGSon

順便說一句，包括'（...）'在你的CSS中是沒有必要的（顯然無效的CSS），以表明你有其他風格。如果樣式與您的問題相關，則應該在MCVE中。如果它們不相關，那麼就沒有必要提及它們。 – TylerH

如果你能接受解決你的問題的答案，或者讓我們知道缺失的東西，那麼這將是非常好的，所以我們可以找到一個答案。 – LGSon

這裏是使其響應3列

#columns{width:100%; float:left;} 
#commentCaMarche{width:33.33%; float:left} 
#details-index{width:33.33%; float:left} 
#sources{width:33.33%; float:left}

來源

2017-04-17 11:09:03

就這麼簡單？謝謝你，它完美的作品！ –

@TomFévrier嗯，那不是'flexbox'，當你嘗試達到相等的高度時，你會感到失望等等，這些不能用於浮動...和浮動是一種非常糟糕的佈局方式 – LGSon

您需要更改順序屬性爲Flex列的CSS。 JSfiddle

#details-index { 
    font-size: 1.6vmin; 
    text-align: center; 
    flex: 1; 
    order: 2; 
    display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/ 
    flex-direction: column; 
    justify-content: space-around; 
} 

#commentCaMarche { 
    font-size: 2vmin; 
    text-align: center; 
    flex: 1; 
    order: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
}

來源

2017-04-17 11:12:34

的flex-wrap: wrap會使你的列斷線時，他們不適合寬度可用，所以從columns規則刪除它，你必須在任何寬3個恰當列。

我還暫時刪除從Flex項目order，所以他們出現在它們被放置在標記相同的順序，但是如果你需要你的樣品中，以改變他們喜歡，請加回來，或者爲什麼不能簡單地交換它們的標記

#credits { 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
    color: #FFFFFF; 
 
    height: 100vh; 
 
    background-color: #FB3D00; 
 
    margin-bottom: 0; 
 
} 
 

 
#columns { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
#details-index { 
 
    font-size: 1.6vmin; 
 
    text-align: center; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
#commentCaMarche { 
 
    font-size: 2vmin; 
 
    text-align: center; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
#sources { 
 
    font-size: 1.4vmin; 
 
    text-align: center; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
}

<div id='credits'> 
 
    <div id='columns'> 
 
    <div id='commentCaMarche'> 
 
     <h2>Comment ça marche</h2> 
 
     (...) 
 
    </div> 
 
    <div id='details-index'> 
 
     <h2>Le détail</h2> 
 
     (...) 
 
    </div> 
 
    <div id='sources'> 
 
     <h2>Sources des données</h2> 
 
     (...) 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-17 11:19:13 LGSon

我的三列響應佈局不尊重flex訂單

回答

相關問題