Flexbox: Space-between Does Not Generate Space Between Items
I'm trying to have space between each .box element, however space-between is not acting to create spaces between the boxes. The boxes appear with no space in between them. See cod
Solution 1:
The code is actually working. The problem is the ".grid" div is taking the minimum height required according to it's content.
If you give ".grid" div height equal to 100vh you can see the result.
height: 100vh;
Here's a fiddle showing the result: https://jsfiddle.net/ayushgupta15/w30h5kep/
Please tell if this is the solution you're looking for.
Solution 2:
Space-between is used for horizontal "box spacing". What you're looking for is margin.
.box {
height: 100px;
width: 100px;
background-color: blue;
margin: 5px;
}
like so.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><style>
* {
box-sizing: border-box;
}
.grid {
border: black dashed 1px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
.grid * {
}
.box {
height: 100px;
width: 100px;
background-color: blue;
margin: 5px;
}
</style><divclass="grid"><divclass="box">1
</div><divclass="box">2</div><divclass="box">3</div></div></body></html>You can edit the top, right, left, bottom margin if you want to do so:
margin: (top) (right) (bottom) (left);
Post a Comment for "Flexbox: Space-between Does Not Generate Space Between Items"