我的三列响应布局不尊重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>

所以应该在哪里了'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}

就这么简单？谢谢你，它完美的作品！ –

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

答

的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>

我的三列响应布局不尊重flex订单

相关推荐