Question

我正在教自己关于flexbox布局和希望我的两个＆＃34; flex项目＆＃34;在屏幕宽度低于600px的垂直列中以一个在另一个上方显示的元素。

我的印象是＆＃34; flex-direction：列＆＃34;下面的财产应该照顾这个，但看起来我误解了该财产的目的或细节。

有人可以建议可能允许此行为的属性吗？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      html{background:gray; display:flex}
      .flex-container{background:brown; display:flex; height:100vh; width:600px; margin:auto; border:1px solid black;}
      .flex-item{background:white; width:250px; min-height:100px; margin:auto; font-size:14px;}
      @media (max-width:600px){
        .flex-container{width:100%; flex-direct:column;}
        .flex-item{width:100%; font-size:20px;}
      }
    </style>
  </head>
  <body class="flex-container">
    <div class="flex-item">
      This is a flex item.
    </div>
    <div class="flex-item">
      This is a flex item. I expect it to move below the first on screens less than 600px;
    </div>
  </body>
</html>

Answer 1

正如我所看到的，你在flex-direction属性中有一个拼写错误。尝试替换＆＃34; flex-direct：column;＆＃34;使用＆＃34; flex-direction：列;＆＃34;。

我已经测试了你的例子并且它有所帮助，所以你的实现是正确的。

什么flexbox属性会强制堆叠项目的垂直列？

1 个答案: