In this Fiddle, how can I reduce the space between the individual content(the 1,2,3,4) and its border. I'm kinda new to Flexbox, and I don't know if there is an easy fix to this.
Here is what I mean(more specifically)
versus
Thanks
JS Fiddle: https://jsfiddle.net/Ragingfury/0nrq94jt/2/
.a{
display: flex;
justify-content: space-around;
align-items: center;
flex-flow:row wrap;
text-align:center;
}
.b{
flex:40%;
margin:20px;
border:1px solid blue;
}<div class="a">
<div class="b">
1
</div>
<div class="b">
2
</div>
<div class="b">
3
</div>
<div class="b">
4
</div>
</div>You can use space-evenly and setting some width on your .b instead of flex:40%
I hope that's what you wanted.
Here is working fiddle: https://jsfiddle.net/9xd2hna5/
.first,
.second {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-flow: row wrap;
text-align: center;
}
.b {
width: 15em;
margin: 1em;
border: 1px solid blue;
}<div class="a">
<div class="first">
<div class="b">
1
</div>
<div class="b">
2
</div>
</div>
<div class="second">
<div class="b">
3
</div>
<div class="b">
4
</div>
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加