How to Reduce Space in DIV using Using Flex

user_10969929 0
Viewed 76

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)

https://ibb.co/z73dJ4m

versus

https://ibb.co/pzwhVB5

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>

flexbox spacing css html
2 Answers

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>

user_136690480

Not sure if you asking for this but if you want to reduce space between (1,2,3,4) then, Try adjusting the margin property in class b(i,e .b).

For example if you set margin to less than the current value then it will reduce the space between (1,2,3,4).

Similarly if you want to reduce its border just set border 1px solid blue to something less like border 0.5 solid blue.

And also if you want to reduce the space within the box. i mean space between border and the item inside the box then use padding property in the class b i.e, .b.

Hope this helps you. If you have any question please ask.

Happy coding. :-)

user_79669090
Related