Flexbox: пробел между ними не создает пространства между элементами

Я пытаюсь иметь пробел между каждым элементом.box, однако пробел не действует, чтобы создать пробелы между полями. Ящики появляются без пробелов между ними.

  * {
   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>

Посмотреть коды andbox: https://codesandbox.io/s/8j7k4xjzl

Источник

2 ответа

Решение

Код на самом деле работает. Проблема в том, что div.grid принимает минимальную высоту, требуемую в соответствии с его содержимым.

Если вы укажете div высоту ".grid" равную 100vh, вы увидите результат.

height: 100vh;

Вот скрипка, показывающая результат: https://jsfiddle.net/ayushgupta15/w30h5kep/

Скажите, пожалуйста, это ли решение, которое вы ищете.

Источник

Пространство между ними используется для горизонтального "пробела". То, что вы ищете, это маржа.

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

вот так.

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

Вы можете редактировать верхнее, правое, левое, нижнее поле, если хотите это сделать:

margin: (top) (right) (bottom) (left);
Источник
Другие вопросы по тегам