如何使用html

Question

我不熟悉html

flex-direction: column;
flex-wrap: wrap;

但是，我只想在没有水平滚动条的情况下有足够的水平空间来包装元素。否则，我希望一个垂直滚动条和项目是在一个单一的列。

Answer 1

我在这里用align items:flex start with align content:center问了一个非常类似的问题。我们的问题之间的主要区别在于，我是以行为导向的。

本质上，没有办法动态检测“是否有足够的空间”。当有或没有足够的空间时，您必须告诉浏览器。

所以，媒体查询是你的选择。

您还会看到我在下面的CSS中添加了一个最大高度。在标记的某个地方，在某个级别上，需要有一个高度约束，否则列将不会换行。

我给你准备了一个沙盒https://jsfiddle.net/w2rdbpo0/

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 600px;
  overflow: scroll;
}
.flex-container > div {
  overflow-wrap: break-word;
}

@media (min-width: 600px) {
  /* 600 pixels totally random  */
  /* just assuming 600px meets "enough horizontal room" requirement */
  
  .flex-container {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .flex-container > div {
    max-width: 250px;
  }
}