EN
CSS - conditional fixed margin between items with flex-box
4
points
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>