Question

我想使用flexbox为我的网站制作三列布局。

然而，我的评论CaMarche＆＃39; div似乎不遵循弹性顺序，它位于＆＃39; details-index＆＃39;的顶部。柱。你知道如何解决这个问题吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是使其响应3列的css

#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

您需要更改Flex列的订单属性。 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会使您的列分隔线，因此从order规则中删除它后，您将有3个正确的列任何宽度。

我还暂时从flex项目中移除了#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; }，因此它们按照与标记放置的顺序显示，但如果您需要像样本中那样更改它们，请添加它回来了，或者为什么不简单地在标记中交换它们

＆＃13;

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

＆＃13;

{-# LANGUAGE DeriveFoldable #-}
import Data.Foldable as Foldable

data SList a = Num a | List [SList a]
  deriving (Show, Foldable)

slistToList :: SList a -> [a]
slistToList = Foldable.toList

＆＃13;

我的三列响应式布局不符合弹性顺序

3 个答案: