0

I'm trying to have space between each .box element, however space-between is not acting to create spaces between the boxes. The boxes appear with no space in between them.

  * {
   box-sizing: border-box;
  }

  .grid {
   border: black dashed 1px;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   align-items: center;
  }

  .grid * {
   border: 1px red solid;
  }

  .box {
   height: 100px;
   width: 100px;
   background-color: blue;
  }
<div class="grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

See codesandbox: https://codesandbox.io/s/8j7k4xjzl

TylerH
  • 20,799
  • 66
  • 75
  • 101
ericauv
  • 160
  • 16

2 Answers2

1

The code is actually working. The problem is the ".grid" div is taking the minimum height required according to it's content.

If you give ".grid" div height equal to 100vh you can see the result.

height: 100vh;

Here's a fiddle showing the result: https://jsfiddle.net/ayushgupta15/w30h5kep/

Please tell if this is the solution you're looking for.

Ayush Gupta
  • 114
  • 6
  • Your solution worked for the problem in my question, however I'm having an issue with the actual code I'm trying to use this space-between for, where even setting the grid's height to 100vh does not solve the problem -- however increasing it past 100vh does solve the issue. However I want the grid only to take up 100vh. Is there a way to ensure that the flex-items within the grid do not take up all the available space? – ericauv Sep 19 '18 at 18:14
  • Don't worry. Solution to this is just remove the fixed height and width from the box divs and add padding to them for responsive designing. And then when you add more content to your page that will automatically fit according to your page. Glad to help you. :) – Ayush Gupta Sep 19 '18 at 18:24
-1

Space-between is used for horizontal "box spacing". What you're looking for is margin.

.box {
    height: 100px;
    width: 100px;
    background-color: blue;
    margin: 5px;
}

like so.

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>

<body>

 <style>
  * {
   box-sizing: border-box;
  }

  .grid {
   border: black dashed 1px;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   align-items: center;
  }

  .grid * {

  }

  .box {
   height: 100px;
   width: 100px;
   background-color: blue;
      margin: 5px;
  }
 </style>

 <div class="grid">
  <div class="box">1
  </div>
  <div class="box">2</div>
  <div class="box">3</div>


 </div>

</body>

</html>

You can edit the top, right, left, bottom margin if you want to do so:

margin: (top) (right) (bottom) (left);
Mark
  • 139
  • 7