CSS Flex-box 没有响应

Question

在我的项目中，我有一个容器<div>，我在其中添加了一个边框，以便用户可以看到它。

我将display: flex; 添加到容器中，以便它可以利用弹性框。我当前的代码完美运行。这是因为它目前是完全响应式的，这意味着当我从右侧或左侧调整窗口大小时，容器也会移动，这非常适合响应式。

这是我当前的代码：

 <div class="flex-container">
            <h1>YO!</h1>
 </div>

.flex-container {
    display: flex;
    flex-direction: row;
    border: 1px solid #e3e3e3;
    justify-content:center;
    align-items: center;
    margin-left: 40px;
}  

但是，当我向 .flex-container 添加宽度和高度时，当我调整窗口大小时它不会响应 - 容器不会随之移动。

所以当我将它添加到容器时会发生这种情况：

width: 350px;
height: 615px;

有人知道为什么会这样吗？是否有某种方法可以设置设置了display: flex; 的容器的宽度和高度？谢谢。

Answer 1

通常，常规的width 参数不是响应式设计。

将width: 350px 更改为max-width: 350px 可能会达到您想要的结果（虽然这个尺寸不会留下太多的增长空间，但它会随着窗口尺寸低于350px 宽度的变化而缩小）。

Answer 2

这是因为您要添加固定的宽度和高度。这与元素是否设置为显示 flex 无关。

您是在告诉容器它具有 350 像素的静态固定宽度。 350px 是一个绝对值，与屏幕大小无关。

如果您使用 flex，您可以使用 flex-basis 并设置百分比来设置容器的宽度，甚至更高级：使用 flex-grow 或 flex-shrink 响应式收缩或扩展容器，具体取决于关于容器大小。

Answer 3

所以不是

width: 350px;

这样做

width: 100%;
max-width: 350px;

这里有一个链接 https://jsfiddle.net/mironomadic/5cvgmpth/3/ 它可以工作

此外，如果您需要将列堆叠在一起，请更改

flex-direction: row;

到

flex-direction: column;