Top community members

If you think it is valuable to share IT knowledge and help others.

It is the right place for you. ❤ 💻

Join our community.

[Edit]
EN

CSS - conditional fixed margin between items with flex-box

4 points
Created by:
Ticket Ninja
2332

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>

 

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more