如何在调整浏览器大小时使flex容器div的宽度为100％？

Question

当屏幕尺寸缩小到手机的屏幕尺寸（例如最大宽度：480像素）时，是否可以使felx容器（display：flex）中的divs为100％？

让我们以这个为例：

.flex-container { background-color: #F4F7F8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; }
.item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; }
.four { flex: 4; }
.two { flex: 2; }
.one { flex: 1; }
```

<div class="flex-container">
    <div class="item four">4</div>
    <div class="item two">2</div>
    <div class="item one">1</div>
</div>

链接到jsFiddle

在将屏幕尺寸从台式机/笔记本电脑缩小到手机的尺寸时，我希望它类似于

我通过添加

@media only screen and (max-width: 480px) {
.flex-container { display:block; }
.item { width: 100%; }
}

到CSS文件。

我不知道这是完成任务的正确方法。

Answer 1

如果您正在使用flex，则实现此目标的正确方法是将flex-direction: column应用于flex-container。在这种情况下，弹性项目将重新组织以形成列而不是行（如在更大的屏幕上）：

@media only screen and (max-width: 480px) {
  .flex-container { flex-direction: column; }
  .item { width: 100%; }
}

flex-direction

Answer 2

将伸缩容器方向类型更改为列。它会帮助

.flex-container { flex-direction: column; }