Question

我想将flex-direction:column用于特定的布局。

我通常使用标准flex-direction:row，因此使用column时遇到了一些问题。我不太了解如何控制它，也没有在谷歌上找到任何有用的东西。

我有一个常规UL列表，我想要的是这个：

1 3 5 7

2 4 6

我目前得到的是：

我目前的简化代码是：

.ul{
  display: flex;
  flex-direction: column;

  li{
    width: 25%;
  }
}

Answer 1

在Dim wb1, wb2, wb3 as workbook set wb1 = workbooks.open(......) set wb2 = workbooks.open(......) set wb3 = workbooks.open(......) Sheets(Array(wb1.Sheets(...),wb2.Sheets(...),wb3.Sheets(...))).PrintOut上应用总计height并将其设为ul。

然后将wrap flex-basis应用于ul li（这是因为我们应用了flex-direction: column），这是高度的50％。像：

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%; /* which in this case will be '50px' */
}

请看下面的代码段：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100px;
}
ul li {
  flex-basis: 50%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

希望这有帮助！

Answer 2

对于跨越多列的列表：

您必须指定已定义的高度。
使用flex-wrap: wrap将其设置为换行（默认设置为nowrap）

见下面的演示：

ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50px;
}
li {
  width: 25%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

Answer 3

您需要为Flex容器指定一个定义的高度。

如果容器上没有固定的高度，则物品不知道包裹的位置。

您还需要添加flex-wrap: wrap，因为Flex容器上的初始设置为nowrap。

Answer 4

首先，您需要在flex-container和flex-wrap: wrap上设置身高。接下来，您可以在flex-basis: 50%上设置flex-item，这样可以获得所需的结果。

＆＃13;

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}
li {
  flex-basis: 50%;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

＆＃13;

Answer 5

在.loader { height: 20vw; width: 20vw; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .loader::after { content: ""; position: absolute; z-index: -1; top: 22%; bottom: 0; left: 0; right: 0; border-top: 2px dotted #ff0000; margin-top: -7%; } .square { position: absolute; top: 0; left: 0; display: block; bottom: 0.15vw; width: 0.15vw; height: 0.15vw; background-color: transparent; } .square:nth-child(1) { transform: scale(0.01, 0.01); border: 0.35vw solid #000000; animation-name: spin-scale-cube1; animation-duration: 3s; animation-delay: 0s; animation-timing-function: steps(6, 6); animation-iteration-count: infinite; z-index: 1; } .square:nth-child(2) { border: 0.35vw solid #DCDA15; animation-name: spin-scale-cube1; animation-duration: 3s; animation-delay: 0.08s; animation-timing-function: steps(6, 6); animation-iteration-count: infinite; z-index: -1; } .square:nth-child(3) { border: 0.35vw solid #00A2DE; animation-name: spin-scale-cube1; animation-duration: 3s; animation-delay: 0.18s; animation-timing-function: steps(5, 5); animation-iteration-count: infinite; z-index: 0; } .loader-text { color: #000000; text-align: center; font-family: "Arial", sans-serif; font-size: 3vw; margin-top: 27%; } .loader-text span { margin: 0; padding: 0; width: 0.3vw; display: inline-block; visibility: hidden; } .loader-text span:nth-child(1) { animation-name: blink-dot1; animation-duration: 3s; animation-delay: 0s; animation-timing-function: steps(4); animation-iteration-count: infinite; } .loader-text span:nth-child(2) { animation-name: blink-dot2; animation-duration: 3s; animation-delay: 0.1s; animation-timing-function: steps(4); animation-iteration-count: infinite; } .loader-text span:nth-child(3) { animation-name: blink-dot3; animation-duration: 3s; animation-delay: 0s; animation-timing-function: steps(4); animation-iteration-count: infinite; } .ground { border-bottom: 2px solid #ff0000; } @keyframes spin-scale-cube1 { 0% { width: 0vw; height: 0vw; transform: translate(0vw, 0) rotate(0deg); transform-origin: bottom right; } 1% { bottom: 1vw; width: 1vw; height: 1vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 2% { bottom: 1.5vw; width: 1.5vw; height: 1.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 3% { bottom: 2vw; width: 2vw; height: 2vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 4%, 10% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 20% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(90deg); } 20.01% { transform: translate(3.2vw, 0) rotate(0deg); } 40% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(3.2vw, 0) rotate(90deg); } 40.01% { transform: translate(6.4vw, 0) rotate(0deg); } 60% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(6.4vw, 0) rotate(90deg); } 60.01% { transform: translate(9.6vw, 0) rotate(0deg); } 80% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(9.6vw, 0) rotate(90deg); } 80.01% { transform: translate(12.8vw, 0) rotate(0deg); } 90% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(12.8vw, 0) rotate(0deg); } 90.01% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 91% { bottom: 1.5vw; width: 1.5vw; height: 1.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 93% { bottom: 1vw; width: 1vw; height: 1vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 95% { bottom: 0.5vw; width: 0.5vw; height: 0.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 97% { bottom: 0vw; width: 0vw; height: 0vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 100% { bottom: 0vw; width: 0vw; height: 0vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } } @keyframes spin-scale-cube2 { 0% { width: 0vw; height: 0vw; transform: translate(0vw, 0) rotate(0deg); transform-origin: bottom right; } 1% { bottom: 1vw; width: 1vw; height: 1vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 2% { bottom: 1.5vw; width: 1.5vw; height: 1.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 3% { bottom: 2vw; width: 2vw; height: 2vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 4%, 10% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 20% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(90deg); } 20.01% { transform: translate(3.2vw, 0) rotate(0deg); } 40% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(3.2vw, 0) rotate(90deg); } 40.01% { transform: translate(6.4vw, 0) rotate(0deg); } 60% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(6.4vw, 0) rotate(90deg); } 60.01% { transform: translate(9.6vw, 0) rotate(0deg); } 80% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(9.6vw, 0) rotate(90deg); } 80.01% { transform: translate(12.8vw, 0) rotate(0deg); } 90% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(12.8vw, 0) rotate(0deg); } 90.01% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 91% { bottom: 1.5vw; width: 1.5vw; height: 1.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 93% { bottom: 1vw; width: 1vw; height: 1vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 95% { bottom: 0.5vw; width: 0.5vw; height: 0.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 97% { bottom: 0vw; width: 0vw; height: 0vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 100% { bottom: 0vw; width: 0vw; height: 0vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } } @keyframes spin-scale-cube3 { 0% { width: 0vw; height: 0vw; transform: translate(0vw, 0) rotate(0deg); transform-origin: bottom right; } 1% { bottom: 1vw; width: 1vw; height: 1vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 2% { bottom: 1.5vw; width: 1.5vw; height: 1.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 3% { bottom: 2vw; width: 2vw; height: 2vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 4%, 10% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(0deg); } 20% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(0vw, 0) rotate(90deg); } 20.01% { transform: translate(3.2vw, 0) rotate(0deg); } 40% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(3.2vw, 0) rotate(90deg); } 40.01% { transform: translate(6.4vw, 0) rotate(0deg); } 60% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(6.4vw, 0) rotate(90deg); } 60.01% { transform: translate(9.6vw, 0) rotate(0deg); } 80% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(9.6vw, 0) rotate(90deg); } 80.01% { transform: translate(12.8vw, 0) rotate(0deg); } 85% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(12.8vw, 0) rotate(0deg); } 90.01% { bottom: 2.5vw; width: 2.5vw; height: 2.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 91% { bottom: 1.5vw; width: 1.5vw; height: 1.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 93% { bottom: 1vw; width: 1vw; height: 1vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 95% { bottom: 0.5vw; width: 0.5vw; height: 0.5vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 97% { bottom: 0vw; width: 0vw; height: 0vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } 100% { bottom: 0vw; width: 0vw; height: 0vw; transform-origin: bottom right; transform: translate(16vw, 0) rotate(0deg); } } @keyframes blink-dot1 { 0%, 18% { visibility: hidden; } 19% { visibility: hidden; } 20% { visibility: visible; } 100% { visibility: hidden; } } @keyframes blink-dot2 { 0%, 50% { visibility: hidden; } 51% { visibility: hidden; } 52% { visibility: visible; } 100% { visibility: hidden; } } @keyframes blink-dot3 { 0%, 73% { visibility: hidden; } 74% { visibility: hidden; } 75% { visibility: visible; } 100% { visibility: hidden; } } <div class="loader"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="loader-text">Loading <span>.</span> <span>.</span> <span>.</span> </div> </div>上使用flex-wrap:wrap;。您不需要严格将高度设置为一个值，但它的高度一次不能超过2个，但应该能够包含2个。

＆＃13;

ul

＆＃13;

li{
  width:50px;
  list-style-type:none;
  height:50px;
  margin:5px;
  background-color:green;
  color:white;
}
ul{
  height:150px;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}

＆＃13;

Answer 6

如果您不知道每件物品的高度或将要拥有的物品数量，则更灵活的解决方案是：

ul {
  column-count: 4
}
li {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

如果margin-top中的li:first-child与顶部不对齐，您可能还需要调整它们。

Flex项目未包装在列方向容器中

6 个答案: