Matija Matija - 1 month ago 14
Sass (Sass) Question

positioning elements using css

Let's say I have this code.

<div class="big_div" >
<div class="small_div" id="small_div_1" ></div>
<div class="small_div" id="small_div_2" ></div>
<div class="small_div" id="small_div_3" ></div>
<div class="small_div" id="small_div_4" ></div>
</div>

.big_div{
width:1000px;
height:1000px;
background-color:green;
}
.small_div{
width:50px;
height:50px;
position:absolute;
top:100px;
background-color:red;
}
#small_div_1{
left:200px;
}


Ok, so I have 4 red squares on green surface, the first square (
#small_div_1
) is 200px from left side of surface, and all of them are 100px from top of surface. How I can make 3 other squares positioned next to their previous sibling (
#small_div_2
- 250px from left,
#small_div_3
- 300px from left,
#small_div_4
- 350px from left), without positioning every square separately. Because that is not problem when I have 4 squares, but when I have 100 of them, that is a problem. Is there a way of doing that using Sass or something like that, maybe JavaScript?

Answer

You can do something like this. using css: flexbox.

.big_div {
  width: 1000px;
  height: 1000px;
  display: flex;
  background-color: green;
  direction: column;
  justify-content: space-around;
}
.small_div {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-top: 100px;
  border: 1px solid black;
}
<div class="big_div">
  <div class="small_div" id="small_div_1"></div>
  <div class="small_div" id="small_div_2"></div>
  <div class="small_div" id="small_div_3"></div>
  <div class="small_div" id="small_div_4"></div>
  <div class="small_div" id="small_div_5"></div>
  <div class="small_div" id="small_div_6"></div>
</div>