Justify content

HTML-CSS
1
main{ display:flex; justify-content: space-between; } .box1{ flex-basis:50%; height:100px; border-style:solid;

}
.box2{
width:50%;
height:100px;
border-style:solid;

}

.box3{
width:50%;
height:100px;
border-style:solid;

}
.box4{
width:50%;
height:100px;
border-style:solid;
}

.box5{
width:50%;
height:100px;
border-style:solid;
}
.box6{
width:50%;
height:100px;
border-style:solid;
}
.box7{
width:50%;
height:100px;
border-style:solid;
}

box 1
box 2
box 3
box 4
box 5
box 6
box 7

the others are working except the justify content part, what do you think is the problem. I tried every kind of situation, and it didn’t work.

2

What are you trying to do exactly?

Also you can play around with the browser’s element selector to know how these styles work.

MDN has a good reference for how this works

3

If you need help with a tutorial, leave a link to the tutorial here. If you are experiencing problems with a project, leave a link to the codepen if you are using one, so that others can help you.

4

There isn’t any space to distribute. You have set the flex-basis and width in a way that doesn’t allow for 7 elements to sit side by side and have any space between them.

To see the space you would have to set the flex-basis/width to 14% and below (100 / 7 = 14,285) or some fixed value small enough (that is if you set box-sizing: border-box otherwise you have to account for the border size as well). The space will also disappear as the container shrinks down.

Just as an aside. There is no point in having 6 classes with the same styles. The point of a class is that the styles can be shared on different elements using the same class.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.