弹性项目可以包裹在具有动态高度的容器中吗? [英] Can flex items wrap in a container with dynamic height?

查看：23
本文介绍了弹性项目可以包裹在具有动态高度的容器中吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个弹性盒问题.任何人都可以指出我正确的方向吗?甚至可能是 flex-box 无法解决这种情况，因为它的工作方式.

I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works.

  1. 我想跨 4 列显示内容.

  1. I want to display content across 4 columns.

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

Have the content be listed in a columnar format and wrap to the next column when running out of room. 

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

应该注意这一点.

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

But this is where things get tricky. What if I don't want a fixed height, but one that grows/shrinks based on the length of the content?

容器的高度是动态的.与案例 B 一样，行从案例 A 的 4 行增加到 7 行.内容设置为尽可能填满所有列.

Have the container's height be dynamic. Like in Case B, the rows grew to 7 rows from 4 rows in Case A. Content is being set to fill all columns as far as they can go.

.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

推荐答案

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

You can use CSS columns and the height will adapt based on the content.

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>

这篇关于弹性项目可以包裹在具有动态高度的容器中吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆