'How can i pile balls in a box starting from the bottom?

I'm trying to do like a stack of balls inside a box (div/container) but when I try the balls start to stack from the top, and I want the same thing but starting from the bottom of the box.

Here is the HTML & CSS code:

#target1 {
  width: 205px;
  height: 180px;
  border: 5px solid rgb(30, 87, 212);
  border-top-color: white;
}

.prueba {
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: black;
}
<div id='target1'>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
</div>

Output of the code

htmlcss


Solution 1:[1]

Something like this work ?

#target1 {
  width: 180px;
  padding-top: 100px;
  border: 5px solid rgb(30, 87, 212);
  border-top-color: white;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row ;
}

.prueba {

  height: 40px;
  width: 40px;
  background-color: black;
  border-radius: 50%;
  bottom : 0;
}
<div id='target1'>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
  <div class='prueba'></div>
</div>

Solution 2:[2]

Css likes to fill that way. You could try just accepting that and use a transform to turn the box upside down.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 JohntheFish

Related Questions