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

Posted 2023-03-06

【中文标题】弹性项目可以包装在具有动态高度的容器中吗？

【英文标题】：Can flex items wrap in a container with dynamic height?

【发布时间】：2017-10-09 08:59:27

【问题描述】：

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

我想跨 4 列显示内容。

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

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

应该注意这一点。

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

让容器的高度是动态的。与案例 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">***sville</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

【参考方案1】：

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

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

<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>

【参考方案2】：

如果弹性项目没有遇到容器的高度或宽度限制，则它们无法换行。此限制用作断点。否则，他们为什么要包装？如果没有固定的高度或宽度，它们就没有理由换行。

这在行方向上不是问题，因为默认情况下，块级元素仅限于其父级的宽度。所以一个弹性容器最初被设置为width: 100%。

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

因此，为了让弹性项目在列方向上换行，容器必须有一个固定的高度（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">***sville</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

【讨论】：

正如我对 flexbox 的怀疑一样，“如果 Flex 项目没有遇到容器的高度或宽度限制，它们就无法换行。”

是的，但是如果您想要的动态高度容器恰好也是视口，那么 flexbox 将为您工作。