当设备宽度缩小时如何将弯曲方向从行转向列（HTML）

Question

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

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

Answer 1

这是使用的基本演示media-queries。本质上只需在要更改 Flex 方向的位置选择指定的宽度，然后将其设置为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>