Question

我尝试创建一个元素的响应列表，这些元素垂直对齐，但如果没有足够的空间，则应与新列对齐。

以下代码片段演示了我的问题：

错误包装，元素是推动容器，而不是破坏到新的column

.flex-column-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid black;
  max-height: 100%;
 }
 
 .flex-item{
 height: 40px;
 background-color: aliceblue;
 margin-bottom: 10px;
 width: 80px;
}

<div class="flex-column-container"> 
  <div class="flex-item">
    1. Element
  </div>
  <div class="flex-item">
    2. Element
  </div>  
  <div class="flex-item">
    3. Element
  </div>  
  <div class="flex-item">
    4. Element
  </div>
</div>

如果我应用了修订height，那么一切正常，但是为什么max-height还在扩展？跟随行为将是完美的，但高度灵活，我不能指望像vh

这样的任何高度

此处正确包装，但使用fix height

.flex-column-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid black;
  height: 140px;
 }
 
 .flex-item{
 height: 40px;
 background-color: aliceblue;
 margin-bottom: 10px;
 width: 80px;
}

<div class="flex-column-container"> 
  <div class="flex-item">
    1. Element
  </div>
  <div class="flex-item">
    2. Element
  </div>  
  <div class="flex-item">
    3. Element
  </div>  
  <div class="flex-item">
    4. Element
  </div>  
  <div class="flex-item">
    5. Element
  </div>  
</div>

还是有其他完全相同的行为方式？

Answer 1

你去了。您也可以使用justify-content:space-around or space-between.

.flex-column-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid black;
  max-height: 100%;
justify-content:left;
 }
 
 .flex-item{
 height: 40px;
 background-color: aliceblue;
 margin:0 15px 10px;
 width: 120px;
}

<div class="flex-column-container"> 
  <div class="flex-item">
    1. Element
  </div>
  <div class="flex-item">
    2. Element
  </div>  
  <div class="flex-item">
    3. Element
  </div>  
  <div class="flex-item">
    4. Element
  </div>
<div class="flex-item">
    5. Element
  </div>
<div class="flex-item">
    6. Element
  </div>
</div>

Answer 2

确定在misorude的评论旁边，我通过将height和width设置为 viewport-sizes 实现了包装，我无法想象其他现在。

body {
  height: 100vh;
  width: 100vw;
}

.flex-column-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 5px;
  border: 1px solid black;
  max-height: 100%;
}

.flex-item {
  width: 80px;
  height: 40px;
  background-color: aliceblue;
  margin-bottom: 10px;
}

<body>
  <div class="flex-column-container">
    <div class="flex-item">
      1. Element
    </div>
    <div class="flex-item">
      2. Element
    </div>
    <div class="flex-item">
      3. Element
    </div>
    <div class="flex-item">
      4. Element
    </div>
  </div>
</body>

Flexbox：垂直元素列表未拆分到新列

2 个答案: