当我们减小设备宽度时，1 列弹性布局不响应

Question

以下

flex

布局有效，但是当我们减小设备宽度时（例如：Chrome 开发者工具、触摸设备模拟），它不会减小其宽度，并且不会使列居中且两侧都有白色边距侧面。

为什么？

在下面的代码片段中不容易看到，但这里有一个现场演示：https://gget.it/isp6/test.html

html, body { padding: 0; margin: 0; height: 100%; }
.container { display: flex; align-items: center; flex-direction: column; width: 80%; height: 100%; background-color: #ccc; margin: auto; }
img { max-height: 100%; max-width: 100%; }
.top { width: 50%; background-color: #ddd; }
.middle { background-color: #aaa; }
.bottom { flex-grow: 1; background-color: white; }
.footer { background-color: #eee; }

<div class="container">
  <div class="top">
    <img src="https://placehold.co/3000x2000">
  </div>
  <div class="middle">
    middle
  </div>
  <div class="bottom">
    bottom (should fill space with white, so that footer is always sticky on bottom)
  </div>
  <div class="footer">
    footer
  </div>
</div>

注意：宽度已经是230px左右了。为什么？

Answer 1

您缺少视口标签：

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

添加类似上述内容会指示您的浏览器也在移动视口中显示此页面，而不是假设它仅适用于桌面。