Flexbox flex-direction 问题答案

【问题标题】：Flexbox flex-direction issueFlexbox flex-direction 问题
【发布时间】：2018-07-21 05:00:14
【问题描述】：

我在使用 flexbox 时遇到了问题。所以我里面有 1 个容器和 2 个块。当屏幕宽度小于 700 像素时，我想将 flex-direction 设置为“列”。但我不能。当屏幕宽度小于 700px 时，它们都不会显示。 :)

index.html

<html>
<head>
    <title>Flexbox</title>
 </head>
<body>
        <div class = "container">

            <div class = "slot_1"></div>
            <div class = "slot_2"></div>

        </div>

 <style>
  *{
    margin: 0 auto;
    padding: 0 ;
}
.container{
    width:100%;
    height:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

}
 .slot_1{
     background:red;
      flex: 3;
}

.slot_2{
    background:orange;
    flex:1;
}

@media (max-width:700px){
    .content{
        flex-direction: column;
    }

}
 </style>
</body>

【问题讨论】：

您遇到的主要问题是（除了错误的类名）* { margin: 0 auto; } 规则。使用自动边距会破坏弹性项目的默认行为，所以我建议删除它，它会按您的预期工作：jsfiddle.net/p4aco95u

标签： css flexbox sidebar

【解决方案1】：

您在媒体查询中的班级名称错误。是.content，不应该是.container吗？

【讨论】：

【解决方案2】：

这里有几个问题：

.content 应该是 .container。
您应该为.slot_1 和.slot_2 指定宽度。

这是有效的 CSS

  *{
    margin: 0 auto;
    padding: 0 ;
}
.container{
    width:100%;
    height:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

}
 .slot_1{
   height: 30px;
     background:red;
      flex: 3;
}

.slot_2{
  height: 30px;
    background:orange;
    flex:1;
}

@media all and (max-width: 700px){
    .container{
        flex-direction: column;
    }

    .slot_1,
    .slot_2 {
      width:100%;
    }

}

我添加了 30px 高度用于演示。

这里也在摆弄你的例子： https://jsfiddle.net/x5h1ohzr/

【讨论】：