Menu
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.
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
should take care of this.
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?
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
435
By default, a flex container has the following width and height assigned. width: auto; height: auto; But you can set a fixed height and width to the flex container.
The flex-wrap property is a quick way to make parent elements more responsive on various screen sizes. As with flexbox in general, it simplifies page layouts so you don't have to manually set breakpoints or manage the page overflow yourself.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
right div to wrap onto a new line if it runs out of space. As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
