How to add 1px margin to a flex item that is flex: 0 0 25%?

by

You can use flex: 1 0 22% for example. This will allow your element to be defined by 22% as flex-basis (so only 4 elements per row) and they will grow to fill the remaining space left by margin (since flex-grow is set to 1)

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

The value of flex-basis should be bigger than (20% - margin * 2) and lower than (25% - margin * 2). The first value will allow you to have 5 elements per row, so having a bigger value will make them 4 and having a bigger value than the second one will make the number of element to be 3 per row.

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 21%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
  animation: change 4s linear infinite alternate; 
}

@keyframes change {
  0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;}
  41%,59% {background:red;}
  60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}
}
<div id="foto-container">
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
  <div class="foto foto4">4</div>
  <div class="foto foto5">5</div>
  <div class="foto foto6">6</div>
  <div class="foto foto7">7</div>
  <div class="foto foto8">8</div>
  <div class="foto foto9">9</div>
  <div class="foto foto1">1</div>
  <div class="foto foto2">2</div>
  <div class="foto foto3">3</div>
</div>

More Related Contents:

  1. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  2. How to place elements like this
  3. Make container shrink-to-fit child elements as they wrap
  4. Flexbox code working on all browsers except Safari. Why?
  5. How to center a flex container but left-align flex items
  6. Left column and stacked right column using flexbox CSS [duplicate]
  7. flex property not working in IE
  8. Last margin / padding collapsing in flexbox / grid layout
  9. Equal width flex items even after they wrap
  10. How to center elements on the last row in CSS Grid?
  11. Change div order with CSS depending on device-width
  12. input / button elements not shrinking in a flex container
  13. Flexbox and Internet Explorer 11 (display:flex in ?)
  14. Removing margin from flex items when they wrap
  15. ‘position: sticky’ not working when ‘height’ is defined
  16. Calculator keypad layout with flexbox
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Flex item should align left, not center, when it wraps
  19. Flexbox affects overflow-wrap behavior
  20. How to stretch flex child to fill height of the container?
  21. How to align flexbox columns left and right?
  22. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  23. Prevent a child element from overflowing its parent in flexbox [duplicate]
  24. Why isn’t position:sticky with left:0 working inside a scrollable container?
  25. Chrome does not expand flex parent according to children’s content [duplicate]
  26. CSS object-fit: contain; is keeping original image width in layout
  27. Flexbox with fixed header and footer and scrollable content
  28. Flexbox on IE11: image stretched for no reason?
  29. What are the default values for justify-content & align content?
  30. Sizing flex items on the last row

Leave a Comment