html - 当设备宽度缩小时如何将 flex-direction 从行变为列(HTML)

Question

我正在寻找方法将我在笔记本电脑屏幕上排成一行的三张卡片转换为移动屏幕上的列 View 。不幸的是，我不太清楚如何执行此操作。

在笔记本电脑屏幕上三张卡片看起来正常在移动屏幕上时，三张卡片的宽度超过了一般网站边框的宽度。

Answer 1

这是使用媒体查询 的基本演示。基本上只需在您希望 flex-direction 更改的位置选择指定的宽度，然后将其设置为 flex-direction: column;。

查看完整页面并调整代码片段的大小以查看它是否有效。

.flex-parent {
  display: flex;
  justify-content: space-evenly;
}

.flex-item {
  font-size: 4em;
}

.flex-parent > .flex-item:nth-child(2) {
  color: hotpink;
}

@media only screen and (max-width: 800px) {
  .flex-parent {
    flex-direction: column;
    align-items: center;
  }
}

<div class="flex-parent">
  <div class="flex-item">
    <p>hello world</p>
  </div>
  <div class="flex-item">
    <p>hello world</p>
  </div>
</div>