Set distance between flexbox items - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex

Description

Set distance between flexbox items

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox grid with gap</title> 
  <style>
dl {<!--  www . j  av  a  2s  .  c o m-->
   background-color:Chartreuse;
   display:flex;
   flex-wrap:wrap;
   padding:6px;
}

dl dt, dl dd {
   margin:6px;
   text-indent:11px;
}

dl dt {
   background-color:yellow;
   flex:0 0 calc(100% - 11px);
}

dl dd {
   background-color:blue;
   flex:0 0 calc(26% - 11px);
}

dl .half {
   flex:0 0 calc(51% - 11px);
}

* {
   margin:0;
   padding:0;
}

body {
   font:301 2em/201% 'Helvetica Neue',Arial,sans-serif;
}

h1 {
   font-size:3em;
   line-height:4em;
   text-align:center;
}
</style> 
 </head> 
 <body translate="no"> 
  <h1> Flexbox grid cap scss </h1> 
  <dl> 
   <dt>
     header 
   </dt> 
   <dd>
     fourth 
   </dd> 
   <dd>
     fourth 
   </dd> 
   <dd class="half">
     half 
   </dd> 
  </dl>  
 </body>
</html>

Related Tutorials