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

【问题标题】：What flexbox property would force vertical column of stacked items?什么 flexbox 属性会强制堆叠项目的垂直列？
【发布时间】：2016-03-21 01:31:32
【问题描述】：

我正在自学 flexbox 布局，并希望我的两个“flex item”元素在屏幕宽度低于 600 像素的垂直列中一个在另一个之上显示。

我的印象是下面的“flex-direction:column”属性应该解决这个问题，但看起来我误解了该属性的用途或细节。

有人可以建议一个可能允许这种行为的属性吗？

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

【问题讨论】：

您打错了：flex-direct:column; 更正属性名称 (flex-direction) 即可。

标签： html css layout flexbox

【解决方案1】：

如我所见，您在 flex-direction 属性中有错字。尝试替换“flex-direct:column;”使用“flex-direction:column;”。

我已经测试了你的例子，它有帮助，所以你的想法是正确的。

【讨论】：

谢谢 - 成功了！