Question

我有一个flexbox容器，其中包含3个容器，其类名称为column。我试图将所有具有类名称列的元素更改为100％。当我将屏幕尺寸更改为小于500px时，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>

Answer 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

Answer 2

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

请记住，您可能必须调整子容器width才能正常工作。

工作demo。

Answer 3

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

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

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

为什么CSS flexbox无法与媒体查询一起使用？

3 个答案: