[Edit]

CSS - conditional fixed margin between items with flex-box

1 contributors

2 contributions

0 discussions

7 points

Created by:

user4838

698

In this short article we would like to show trick, how to create conditional fixed margin between items with flex-box using only CSS.

Simple example:

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    div.container {
        border: 1px solid red;
        width: 430px;  /* <------------- change it or remove to see full effect */
        box-sizing: content-box;
        overflow: hidden;  /* <--------- optional */
    }
    
    div.flex {
        /*       v-space   h-space  <--- to remove top and left margins  */
        /*        |         |                                            */
        margin: -10px 0 0 -10px;
        flex-wrap: wrap;  /* <---------- required if we want wrapping for items */
        display: flex;  /* <------------ required */
    }
    
    div.item {
        /*       v-space   h-space  <---  to set vertical and horizontal space  */
        /*        |         |                                                   */
        margin: 10px 0 0 10px;  /* <---- required */
        background: orange;
        width: 100px;
        height: 100px;
    }
    
  </style>
</head>
<body>
  <div class="container">
    <div class="flex">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </div>
</body>
</html>