0

I'm trying to distribute elements of a list vertically evenly while keeping them floating. The count of elements is dynamic, so is there string length. The height of the surrounding container is static. Here's an example:

----------------------------------
| element1 | element2 | element3 |
|                                |
| el4 | el5 | element6 | elem7   |
|                                |
| el8 | element9 | element10     |
|                                |
|                                |
|                                |
----------------------------------

This is desired:

----------------------------------
| element1 | element2 | element3 |
|                                |
|                                |
| el4 | el5 | element6 | elem7   |
|                                |
|                                |
| el8 | element9 | element10     |
|                                |
----------------------------------

As I don't know how many elements are in the container, I can't distribute them into table rows. As you can see in the example, line 2 contains 4 elements whereas line 1 and 3 carry 3 elements. I tried working with line-height but that's not dynamic. If I get more elements, line-height would have to decrease accordingly.

I thought about detecting the element count as in Can CSS detect the number of children an element has? but that doesn't cover different widths of the elements. The pure count doesn't help here.

Any ideas on how to solve that problem using pure CSS?

Hokascha
  • 1,709
  • 1
  • 23
  • 41

2 Answers2

1

Here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Set the following props to parent container

display: flex;
flex-wrap: wrap;
align-items: space-between;
psx
  • 1,315
  • 2
  • 10
  • 12
0

I leave you two examples of Flex.
I don't know what you want exactly.
The javascript is just to give you a random size for the test.
I've gotten too much, you can remove some properties. 

var a = document.getElementsByTagName("div");
for(var i in a){
  if(!a.hasOwnProperty(i)){continue;}
  if(i == 0){continue;}
  a[i].style.minWidth = Math.floor(Math.random()*200+100) +  "px";
  a[i].style.height = Math.floor(Math.random()*20+5) +  "px";
}
div div{
  border: 1px solid;
  display: block;
  background-color: #66F;

}
.container{
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.container > div{
  margin: 5px auto;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

var a = document.getElementsByTagName("div");
for(var i in a){
  if(!a.hasOwnProperty(i)){continue;}
  if(i == 0){continue;}
  a[i].style.minWidth = Math.floor(Math.random()*200+100) +  "px";
  a[i].style.height = Math.floor(Math.random()*20+5) +  "px";
}
div div{
  border: 1px solid;
  display: block;
  background-color: #66F;
}
.container{
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.container > div{
  flex-shrink: 0;
  flex-grow: 1;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Antonio Torres
  • 342
  • 1
  • 8