当设备宽度缩小(HTML)时，如何从一行转到另一列

Question

我正在寻找方法来转换我的三张卡片，这三张卡站在笔记本电脑屏幕上，变成移动屏幕上的列视图。不幸的是，我不太知道该如何执行。

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

Answer 1

下面是使用media-queries的基本演示。从本质上说，只需选择一个指定的宽度，然后将其设置为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>

​

Answer 2

默认情况下，挠曲方向是行。您所需要做的就是使flex-direction: column只在@media规则中用于移动设备。就像这样。

@media screen and (max-width: 600px){
   .your-class-name{
      flex-direction: column;
   }
}

Answer 3

有一个通用的解决办法来解决你的问题。必须确定内容溢出是否发生在内容中。为此，获取所有内容元素的宽度，并将其与块本身的大小(主要宽度)进行比较。如果发生溢出，则可以更改样式。

要度量宽度，首先通过查询查找元素

const isOverflowing，setOverflowing = useState(false)；useEffect() => { const checkOverfloying = (element_id) => { const element = document.getElementById(element_id)；const容器= document.getElementById(container_id)；if (!element回收器)返回未定义；const isOverflowingEl = container.clientWidth < element.scrollWidth；返回isOverflowingEl；}；element.scrollWidth()；}，[]

元素和容器的element_id，container_id -id