为什么 CSS flexbox 不能与媒体查询一起使用？答案

【问题标题】：Why does CSS flexbox not working with media query?为什么 CSS flexbox 不能与媒体查询一起使用？
【发布时间】：2020-01-22 19:42:37
【问题描述】：

我有一个 flexbox 容器，其中包含 3 个容器，其类名为 column。我正在尝试将所有具有类名列的元素更改为 100%。当我将屏幕尺寸更改为小于 500 像素时，css 媒体查询应该将列宽更改为 100%，但由于某种原因它没有。任何帮助将不胜感激。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>

<meta content="width=device-width, initial-scale=1" name="viewport" />  
<style>

.container{
    max-width:1000px;
    margin:0 auto;
    display:flex;
}


@media all and(max-width:500px){

    .column{
        width:100%;
    }
}

</style>
</head>

<body>

<div id="wrapper">

        <div class="container"> 
                <div class="column">
                  <h3>Column 1</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 2</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="column">
                  <h3>Column 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
        </div>

</div>

</body>
</html>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

在尺寸较小时更改容器的显示或弯曲方向应该可以工作：

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        display: block;
    }
}

或者：

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

正如您在此演示中看到的那样：

https://codepen.io/jeprubio/pen/yLyGZPY

【讨论】：

【解决方案2】：

默认情况下，Flexbox 会尝试将所有内容放在一行中。您可以使用 flex-wrap 强制更改该行为。

@media all and(max-width:500px){
  .container {
    flex-wrap: wrap;
  }
  .column{
    width:100%;
  }
}

演示：https://codepen.io/timohausmann/pen/rNaoPpM

【讨论】：

【解决方案3】：

一个带有 flexbox 的容器最初试图使用所有空间在它的孩子之间共享它们。但是，您可以通过使用 flex-wrap: wrap; 来避免这种情况。

请记住，您可能需要调整子容器 widths 才能按预期工作。

工作demo。

【讨论】：