CODEWITHSUNDEEP
cssflexbox
fightstarr20
fightstarr20

Reputation: 12608

Flexbox padding between items but not edges

I have a basic flexbox implementation like this

.holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 500px;
  background: wheat;
}

.col img {
  max-width: 100%;
}

.col {
  width: 20%;
  float: left;
  text-align: center;
}
<div class="holder">
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
</div>

I am trying to add some padding in between each of the items but not at the edges.

Is flexbox the best solution for this and does anybody have an example they can point me at?

Upvotes: 2

Views: 2076

Answers (2)

VXp
VXp

Reputation: 12078

You can use the flex-basis property where you set the initial width using the calc() function:

.holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 500px;
  background: wheat;
}

.col img {
  max-width: 100%;
}

.col {
  /*width: 20%;*/
  /*float: left; not necessary*/
  flex-basis: calc(20% - 5px);
  text-align: center;
}

/* addition, if desired */
img {
  display: block; /* removes bottom margin/whitespace; "vertical-align: bottom" does the same */
}
<div class="holder">
  <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
    <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
      <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
      <div class="col">
    <img src="https://dummyimage.com/600x400/000/fff">
  </div>
  </div>

Upvotes: 3

Nikita
Nikita

Reputation: 21

For flex box it is pretty easy. Just make the correct width for the items and set justify-content property of container to space-between. Make sure the sum of widths of items is less than 100% width of container.

Upvotes: 0

Related Questions