如何在调整浏览器大小时使 flex 容器 div 的宽度达到 100%？答案

【问题标题】：How do I get flex container divs to be 100 percent in width on resize of the browser?如何在调整浏览器大小时使 flex 容器 div 的宽度达到 100%？
【发布时间】：2019-09-10 21:10:13
【问题描述】：

当屏幕尺寸缩小到手机的尺寸时（比如 max-width: 480px），是否可以让 felx-container (display:flex) 中的 div 达到 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 文件。

我不知道这是否是正确的方法。

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

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

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

flex-direction

【讨论】：

【解决方案2】：

将弹性容器方向类型更改为列。会有帮助的

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

【讨论】：