3列の応答レイアウトがフレックスオーダーを尊重していません

Question

フレックスボックスを使用して私のウェブサイト用に3列のレイアウトを作成したいと思います。

しかし、私の 'commentCaMarche' divはフレックス注文に従っていないようですが、 '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>

Answer 1

それが応答あなたはあなたのフレックスの列の順序プロパティを変更する必要がある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} 

Answer 2

を作るための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; 
} 

Answer 3

flex-wrap: wrapがcolumnsルールからそれを削除することによって、あなたが任意の幅で3つの適切な列を持っていますので、彼らは、可能な幅に合わせていないとき、あなたの列がラインを破るようになります。

またフレックスアイテムから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>