CSS - conditional fixed margin between items with flex-box

4 points
Created by:

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


Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

CSS - Flexbox

Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂