如何在不使用间隙的情况下使用 flex 创建间隙空间 [重复]

Posted 2023-03-06

【中文标题】如何在不使用间隙的情况下使用 flex 创建间隙空间 [重复]

【英文标题】：How to create gap space using flex without using gap [duplicate]

【发布时间】：2021-12-30 15:45:03

【问题描述】：

对于不支持 gap 的浏览器，将使用什么来代替它来创建 10 像素的间隙？

https://jsfiddle.net/9yuqfx4p/

这就是 10px 间隙的样子。

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;


body 
  background: #353198;


.outer 
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  /*gap: 10px;*/
  background: green;


.thePlay 
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));

<div class="outer">
   <button class="playa thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <g id="play">
            <title>Play</title>
            <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
               M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
         </g>
      </svg>
   </button>
   <button class="playb thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playc thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playd thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playe thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playf thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playg thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playh thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playi thePlay" type="button" aria-label="Open">
      <svg   viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
</div>

【问题讨论】：

您可以添加space-between并单独添加元素的顶部和底部边距。

【参考方案1】：

你可以试试：

.outer 
    justify-content: space-around;

编辑：刚刚注意到它们在您的 img 中没有垂直接触，而是在我的。你可以试试：

svg 
  height: 95%;

【讨论】：

或space-between 这样两边就没有空间了。

这不会创建此图像：i.imgur.com/wDTS6RU.png

@htmlcssjava321 删除你的justify-content: center;，它应该......如果你愿意，我可以添加sn-p？

@htmlcssjava321 检查调整后的答案。

【参考方案2】：

您可以在中间列的每个按钮上设置一个名为“中间”的类。然后在它们的每一边添加 10px 的边距。

.middle margin: 0 10px;

【讨论】：

这不会创建此图像，您可以编辑您的答案吗？ i.imgur.com/wDTS6RU.png 你的代码是这样的：i.imgur.com/VsaffWu.png 你的答案将如何修改？