Languages
[Edit]
EN

CSS - conditional fixed margin between items with flex-box

4 points
Created by:
Marcin
2544

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:

// ONLINE-RUNNER:browser;

<!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>

 

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join