可以将项目包装在具有动态高度的容器中吗？

Question

我有一个弹性盒问题。谁能指出我正确的方向？甚至可能是因为它的工作方式，flex-box无法解决这种情况。

1. 我想在4列中显示内容。

2. 让内容以列式格式列出，并在空间不足时换行到下一列。

   display: flex; 
   flex-direction: column; 
   flex-wrap: wrap; 
   height:<##>px
   

   应该照顾好这个。

   但这是事情变得棘手的地方。 如果我不想要一个固定的高度，但是根据内容的长度增长/缩小的高度怎么办？

   

3. 让容器的高度保持动态。与案例B​​一样，案例A中的行从4行增长到7行。内容设置为尽可能填充所有列。

.other-nearby-cities {
  display: flex;
  flex-direction: column;
  height: 700px;
  flex-wrap: wrap;
  border: solid 1px;
}

<ul class="other-nearby-cities">
  <li><span class="capitalize">Altamonte Springs</span><span> (5)</span></li>
  <li><span class="capitalize">Apopka</span><span> (11)</span></li>
  <li><span class="capitalize">Arcadia</span><span> (11)</span></li>
  <li><span class="capitalize">Auburndale</span><span> (5)</span></li>
  <li><span class="capitalize">Belle Glade</span><span> (10)</span></li>
  <li><span class="capitalize">Boca Raton</span><span> (33)</span></li>
  <li><span class="capitalize">Bonita Springs</span><span> (10)</span></li>
  <li><span class="capitalize">Boynton Beach</span><span> (21)</span></li>
  <li><span class="capitalize">Bradenton</span><span> (46)</span></li>
  <li><span class="capitalize">Brandon</span><span> (16)</span></li>
  <li><span class="capitalize">Brooksville</span><span> (8)</span></li>
  <li><span class="capitalize">Cape Coral</span><span> (17)</span></li>
  <li><span class="capitalize">Clearwater</span><span> (90)</span></li>
  <li><span class="capitalize">Clewiston</span><span> (9)</span></li>
  <li><span class="capitalize">Cocoa</span><span> (18)</span></li>
  <li><span class="capitalize">Crystal River</span><span> (6)</span></li>
  <li><span class="capitalize">Dania Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Davie</span><span> (14)</span></li>
  <li><span class="capitalize">Daytona Beach</span><span> (40)</span></li>
  <li><span class="capitalize">Deerfield Beach</span><span> (15)</span></li>
  <li><span class="capitalize">Deland</span><span> (15)</span></li>
  <li><span class="capitalize">Delray Beach</span><span> (41)</span></li>
  <li><span class="capitalize">Englewood</span><span> (5)</span></li>
  <li><span class="capitalize">Fort Lauderdale</span><span> (132)</span></li>
  <li><span class="capitalize">Fort Myers</span><span> (79)</span></li>
  <li><span class="capitalize">Fort Pierce</span><span> (41)</span></li>
  <li><span class="capitalize">Fort Walton Beach</span><span> (17)</span></li>
  <li><span class="capitalize">Gainesville</span><span> (58)</span></li>
  <li><span class="capitalize">Greenacres</span><span> (9)</span></li>
  <li><span class="capitalize">Hallandale Beach</span><span> (11)</span></li>
  <li><span class="capitalize">Havana</span><span> (6)</span></li>
  <li><span class="capitalize">Hollywood</span><span> (22)</span></li>
  <li><span class="capitalize">Hudson</span><span> (5)</span></li>
  <li><span class="capitalize">Immokalee</span><span> (6)</span></li>
  <li><span class="capitalize">Jacksonville</span><span> (214)</span></li>
  <li><span class="capitalize">Key West</span><span> (9)</span></li>
  <li><span class="capitalize">Kissimmee</span><span> (31)</span></li>
  <li><span class="capitalize">Lake City</span><span> (6)</span></li>
  <li><span class="capitalize">Lake Wales</span><span> (8)</span></li>
  <li><span class="capitalize">Lake Worth</span><span> (26)</span></li>
  <li><span class="capitalize">Lakeland</span><span> (45)</span></li>
  <li><span class="capitalize">Lantana</span><span> (8)</span></li>
  <li><span class="capitalize">Largo</span><span> (17)</span></li>
  <li><span class="capitalize">Lauderdale Lakes</span><span> (15)</span></li>
  <li><span class="capitalize">Lauderhill</span><span> (21)</span></li>
  <li><span class="capitalize">Lecanto</span><span> (7)</span></li>
  <li><span class="capitalize">Leesburg</span><span> (22)</span></li>
  <li><span class="capitalize">Live Oak</span><span> (6)</span></li>
  <li><span class="capitalize">Longwood</span><span> (10)</span></li>
  <li><span class="capitalize">Lutz</span><span> (5)</span></li>
  <li><span class="capitalize">Maitland</span><span> (5)</span></li>
  <li><span class="capitalize">Margate</span><span> (11)</span></li>
  <li><span class="capitalize">Marianna</span><span> (6)</span></li>
  <li><span class="capitalize">Melbourne</span><span> (23)</span></li>
  <li><span class="capitalize">Miami</span><span> (468)</span></li>
  <li><span class="capitalize">Milton</span><span> (6)</span></li>
  <li><span class="capitalize">Miramar</span><span> (23)</span></li>
  <li><span class="capitalize">Naples</span><span> (47)</span></li>
  <li><span class="capitalize">New Port Richey</span><span> (20)</span></li>
  <li><span class="capitalize">New Smyrna</span><span> (5)</span></li>
  <li><span class="capitalize">North Port</span><span> (7)</span></li>
  <li><span class="capitalize">Oakland Park</span><span> (11)</span></li>
  <li><span class="capitalize">Ocala</span><span> (33)</span></li>
  <li><span class="capitalize">Okeechobee</span><span> (9)</span></li>
  <li><span class="capitalize">Orange Park</span><span> (7)</span></li>
  <li><span class="capitalize">Orlando</span><span> (216)</span></li>
  <li><span class="capitalize">Ormond Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Oviedo</span><span> (11)</span></li>
  <li><span class="capitalize">Pahokee</span><span> (5)</span></li>
  <li><span class="capitalize">Palatka</span><span> (13)</span></li>
  <li><span class="capitalize">Palm Bay</span><span> (8)</span></li>
  <li><span class="capitalize">Palm Beach Gardens</span><span> (8)</span></li>
  <li><span class="capitalize">Panama City</span><span> (27)</span></li>
  <li><span class="capitalize">Pembroke Pines</span><span> (24)</span></li>
  <li><span class="capitalize">Pensacola</span><span> (69)</span></li>
  <li><span class="capitalize">Perry</span><span> (5)</span></li>
  <li><span class="capitalize">Plantation</span><span> (11)</span></li>
  <li><span class="capitalize">Pompano Beach</span><span> (32)</span></li>
  <li><span class="capitalize">Port Charlotte</span><span> (15)</span></li>
  <li><span class="capitalize">Port Orange</span><span> (5)</span></li>
  <li><span class="capitalize">Port St Lucie</span><span> (17)</span></li>
  <li><span class="capitalize">Punta Gorda</span><span> (8)</span></li>
  <li><span class="capitalize">Quincy</span><span> (11)</span></li>
  <li><span class="capitalize">Riviera Beach</span><span> (36)</span></li>
  <li><span class="capitalize">Rockledge</span><span> (5)</span></li>
  <li><span class="capitalize">Royal Palm Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Sanford</span><span> (20)</span></li>
  <li><span class="capitalize">Santa Rosa Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Sarasota</span><span> (64)</span></li>
  <li><span class="capitalize">Sebring</span><span> (9)</span></li>
  <li><span class="capitalize">Spring Hill</span><span> (7)</span></li>
  <li><span class="capitalize">St Augustine</span><span> (24)</span></li>
  <li><span class="capitalize">St Petersburg</span><span> (137)</span></li>
  <li><span class="capitalize">Starke</span><span> (5)</span></li>
  <li><span class="capitalize">Stuart</span><span> (23)</span></li>
  <li><span class="capitalize">Sunrise</span><span> (16)</span></li>
  <li><span class="capitalize">Tallahassee</span><span> (131)</span></li>
  <li><span class="capitalize">Tamarac</span><span> (5)</span></li>
  <li><span class="capitalize">Tampa</span><span> (221)</span></li>
  <li><span class="capitalize">Tarpon Springs</span><span> (7)</span></li>
  <li><span class="capitalize">Titusville</span><span> (13)</span></li>
  <li><span class="capitalize">Venice</span><span> (15)</span></li>
  <li><span class="capitalize">Vero Beach</span><span> (31)</span></li>
  <li><span class="capitalize">West Palm Beach</span><span> (135)</span></li>
  <li><span class="capitalize">Winter Garden</span><span> (6)</span></li>
  <li><span class="capitalize">Winter Haven</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Park</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Springs</span><span> (5)</span></li>
</ul>

https://codepen.io/Talamihg/pen/WjMYNd

Answer 1

您可以使用CSS列，高度将根据内容进行调整。

＆＃13;

＆＃13;

ul {
  column-count: 4;
  list-style: none;
  background: #eee;
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
  <li>N</li>
  <li>O</li>
  <li>P</li>
  <li>Q</li>
  <li>R</li>
  <li>S</li>
  <li>T</li>
  <li>U</li>
  <li>V</li>
  <li>W</li>
  <li>X</li>
  <li>Y</li>
  <li>Z</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果Flex项目没有遇到容器的高度或宽度限制，则无法换行。这个限制是一个突破点。否则，他们为什么要包裹？没有固定的高度或宽度，他们没有理由包装。

这在行方向上不是问题，因为默认情况下，块级元素限制为其父级的宽度。因此，Flex容器最初设置为width: 100%。

但是身高没有这样的限制。块级元素最初设置为height: auto，这是其内容的高度。

因此，为了使flex项目在列方向上包装，容器必须具有固定的高度（height，max-height，flex-basis才能正常工作。

EXCEPT ...如果布局跨越整个视口高度（这里似乎是这种情况），那么所有这些都是需要的是height: 100vh。这允许高度既动态又固定。 Flex项目现在可以在列方向上进行包装。

.other-nearby-cities {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  text-align: center;
}

li {
  width: 25%;
  padding: 10px;
  list-style-type: none;
}

* {
  margin: 0;
  box-sizing: border-box;
}

<ul class="other-nearby-cities">
  <li><span class="capitalize">Altamonte Springs</span><span> (5)</span></li>
  <li><span class="capitalize">Apopka</span><span> (11)</span></li>
  <li><span class="capitalize">Arcadia</span><span> (11)</span></li>
  <li><span class="capitalize">Auburndale</span><span> (5)</span></li>
  <li><span class="capitalize">Belle Glade</span><span> (10)</span></li>
  <li><span class="capitalize">Boca Raton</span><span> (33)</span></li>
  <li><span class="capitalize">Bonita Springs</span><span> (10)</span></li>
  <li><span class="capitalize">Boynton Beach</span><span> (21)</span></li>
  <li><span class="capitalize">Bradenton</span><span> (46)</span></li>
  <li><span class="capitalize">Brandon</span><span> (16)</span></li>
  <li><span class="capitalize">Brooksville</span><span> (8)</span></li>
  <li><span class="capitalize">Cape Coral</span><span> (17)</span></li>
  <li><span class="capitalize">Clearwater</span><span> (90)</span></li>
  <li><span class="capitalize">Clewiston</span><span> (9)</span></li>
  <li><span class="capitalize">Cocoa</span><span> (18)</span></li>
  <li><span class="capitalize">Crystal River</span><span> (6)</span></li>
  <li><span class="capitalize">Dania Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Davie</span><span> (14)</span></li>
  <li><span class="capitalize">Daytona Beach</span><span> (40)</span></li>
  <li><span class="capitalize">Deerfield Beach</span><span> (15)</span></li>
  <li><span class="capitalize">Deland</span><span> (15)</span></li>
  <li><span class="capitalize">Delray Beach</span><span> (41)</span></li>
  <li><span class="capitalize">Englewood</span><span> (5)</span></li>
  <li><span class="capitalize">Fort Lauderdale</span><span> (132)</span></li>
  <li><span class="capitalize">Fort Myers</span><span> (79)</span></li>
  <li><span class="capitalize">Fort Pierce</span><span> (41)</span></li>
  <li><span class="capitalize">Fort Walton Beach</span><span> (17)</span></li>
  <li><span class="capitalize">Gainesville</span><span> (58)</span></li>
  <li><span class="capitalize">Greenacres</span><span> (9)</span></li>
  <li><span class="capitalize">Hallandale Beach</span><span> (11)</span></li>
  <li><span class="capitalize">Havana</span><span> (6)</span></li>
  <li><span class="capitalize">Hollywood</span><span> (22)</span></li>
  <li><span class="capitalize">Hudson</span><span> (5)</span></li>
  <li><span class="capitalize">Immokalee</span><span> (6)</span></li>
  <li><span class="capitalize">Jacksonville</span><span> (214)</span></li>
  <li><span class="capitalize">Key West</span><span> (9)</span></li>
  <li><span class="capitalize">Kissimmee</span><span> (31)</span></li>
  <li><span class="capitalize">Lake City</span><span> (6)</span></li>
  <li><span class="capitalize">Lake Wales</span><span> (8)</span></li>
  <li><span class="capitalize">Lake Worth</span><span> (26)</span></li>
  <li><span class="capitalize">Lakeland</span><span> (45)</span></li>
  <li><span class="capitalize">Lantana</span><span> (8)</span></li>
  <li><span class="capitalize">Largo</span><span> (17)</span></li>
  <li><span class="capitalize">Lauderdale Lakes</span><span> (15)</span></li>
  <li><span class="capitalize">Lauderhill</span><span> (21)</span></li>
  <li><span class="capitalize">Lecanto</span><span> (7)</span></li>
  <li><span class="capitalize">Leesburg</span><span> (22)</span></li>
  <li><span class="capitalize">Live Oak</span><span> (6)</span></li>
  <li><span class="capitalize">Longwood</span><span> (10)</span></li>
  <li><span class="capitalize">Lutz</span><span> (5)</span></li>
  <li><span class="capitalize">Maitland</span><span> (5)</span></li>
  <li><span class="capitalize">Margate</span><span> (11)</span></li>
  <li><span class="capitalize">Marianna</span><span> (6)</span></li>
  <li><span class="capitalize">Melbourne</span><span> (23)</span></li>
  <li><span class="capitalize">Miami</span><span> (468)</span></li>
  <li><span class="capitalize">Milton</span><span> (6)</span></li>
  <li><span class="capitalize">Miramar</span><span> (23)</span></li>
  <li><span class="capitalize">Naples</span><span> (47)</span></li>
  <li><span class="capitalize">New Port Richey</span><span> (20)</span></li>
  <li><span class="capitalize">New Smyrna</span><span> (5)</span></li>
  <li><span class="capitalize">North Port</span><span> (7)</span></li>
  <li><span class="capitalize">Oakland Park</span><span> (11)</span></li>
  <li><span class="capitalize">Ocala</span><span> (33)</span></li>
  <li><span class="capitalize">Okeechobee</span><span> (9)</span></li>
  <li><span class="capitalize">Orange Park</span><span> (7)</span></li>
  <li><span class="capitalize">Orlando</span><span> (216)</span></li>
  <li><span class="capitalize">Ormond Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Oviedo</span><span> (11)</span></li>
  <li><span class="capitalize">Pahokee</span><span> (5)</span></li>
  <li><span class="capitalize">Palatka</span><span> (13)</span></li>
  <li><span class="capitalize">Palm Bay</span><span> (8)</span></li>
  <li><span class="capitalize">Palm Beach Gardens</span><span> (8)</span></li>
  <li><span class="capitalize">Panama City</span><span> (27)</span></li>
  <li><span class="capitalize">Pembroke Pines</span><span> (24)</span></li>
  <li><span class="capitalize">Pensacola</span><span> (69)</span></li>
  <li><span class="capitalize">Perry</span><span> (5)</span></li>
  <li><span class="capitalize">Plantation</span><span> (11)</span></li>
  <li><span class="capitalize">Pompano Beach</span><span> (32)</span></li>
  <li><span class="capitalize">Port Charlotte</span><span> (15)</span></li>
  <li><span class="capitalize">Port Orange</span><span> (5)</span></li>
  <li><span class="capitalize">Port St Lucie</span><span> (17)</span></li>
  <li><span class="capitalize">Punta Gorda</span><span> (8)</span></li>
  <li><span class="capitalize">Quincy</span><span> (11)</span></li>
  <li><span class="capitalize">Riviera Beach</span><span> (36)</span></li>
  <li><span class="capitalize">Rockledge</span><span> (5)</span></li>
  <li><span class="capitalize">Royal Palm Beach</span><span> (7)</span></li>
  <li><span class="capitalize">Sanford</span><span> (20)</span></li>
  <li><span class="capitalize">Santa Rosa Beach</span><span> (5)</span></li>
  <li><span class="capitalize">Sarasota</span><span> (64)</span></li>
  <li><span class="capitalize">Sebring</span><span> (9)</span></li>
  <li><span class="capitalize">Spring Hill</span><span> (7)</span></li>
  <li><span class="capitalize">St Augustine</span><span> (24)</span></li>
  <li><span class="capitalize">St Petersburg</span><span> (137)</span></li>
  <li><span class="capitalize">Starke</span><span> (5)</span></li>
  <li><span class="capitalize">Stuart</span><span> (23)</span></li>
  <li><span class="capitalize">Sunrise</span><span> (16)</span></li>
  <li><span class="capitalize">Tallahassee</span><span> (131)</span></li>
  <li><span class="capitalize">Tamarac</span><span> (5)</span></li>
  <li><span class="capitalize">Tampa</span><span> (221)</span></li>
  <li><span class="capitalize">Tarpon Springs</span><span> (7)</span></li>
  <li><span class="capitalize">Titusville</span><span> (13)</span></li>
  <li><span class="capitalize">Venice</span><span> (15)</span></li>
  <li><span class="capitalize">Vero Beach</span><span> (31)</span></li>
  <li><span class="capitalize">West Palm Beach</span><span> (135)</span></li>
  <li><span class="capitalize">Winter Garden</span><span> (6)</span></li>
  <li><span class="capitalize">Winter Haven</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Park</span><span> (19)</span></li>
  <li><span class="capitalize">Winter Springs</span><span> (5)</span></li>
</ul>

revised codepen

另一个选项是CSS Grid。请看这篇文章：

• Make a div span two rows in a grid