仅在项目之间产生差距 [英] Gaps between items only

问题描述

我需要项目之间具有垂直间距（10px）的弹性项目。没有空白。

.container {margin：0 -5px} 的解决方案不好，它会使横向由于某种原因滚动条。

请勿提供响应式断点。

解决方案

或媒体查询，您需要稍微修改标记。

使用额外的 wrapper ，然后补偿左边距设置的项目，
，所以它只会在包装时可见。

注意，这个技巧是众所周知的，因为或多或少的所有框架，像Bootstrap等，使用它来完成他们的解决方案相同。 CSS Grid 可以做到这一点更简单，但由于缺乏浏览器支持，这是目前最常用的功能。

更新后的codepen p>

堆栈片段

body {margin：0; background：black;}。container {max-width：700px; margin：20px auto;溢出：隐藏; / * added * /}。wrapper {display：flex; / *弯曲方向：行;默认，不需要* / flex-wrap：wrap; margin-left：-10px; / *补偿项目边际* /}。wrapper div {min-width：300px;背景：浅蓝色;边框：1px纯蓝色; flex-grow：1;填充：10px; margin-left：10px; / *添加左边距* /}

< div class = 容器 > < div class =wrapper> < DIV - 酮< / DIV> < DIV>二< / DIV> < DIV>三< / DIV> < DIV>四< / DIV> < DIV>五< / DIV> < / div>< / div>

I need flex items with vertical gaps (10px) between items. Without gaps around.

Solution with .container {margin: 0 -5px} is not good, it makes horizontal scrollbar for some reason.

No responsive breakpoints please.

Code on Codepen

Here is my code without gap:

.container {
  max-width:700px;
  margin:20px auto;
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}
div > div {
  min-width:300px;
  background:lightblue;
  border:1px solid blue;
  flex-grow: 1;
  margin:5px 0px;
  padding:10px;
}

<div class="container">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>

解决方案

To accomplish that, w/o using a script or media query, you will need a minor markup change.

With the extra wrapper you then compensate the left margin set on the items, so it will only be visible when wrapped.

Note, this trick is well known, since more or less all frameworks, like Bootstrap etc., use this to accomplish the same in their solutions. CSS Grid can do this much simpler, though due to lack of browser support, this is what's mostly used today.

Updated codepen

Stack snippet

body {
  margin: 0;
  background: black;
}

.container {
  max-width: 700px;
  margin: 20px auto;
  overflow: hidden;           /*  added  */
}

.wrapper {
  display: flex;
  /*flex-direction:row;           default, not needed  */
  flex-wrap: wrap;
  margin-left: -10px;         /*  compensate for item margin  */
}

.wrapper div {
  min-width: 300px;
  background: lightblue;
  border: 1px solid blue;
  flex-grow: 1;
  padding: 10px;
  margin-left: 10px;          /*  added left margin  */
}

<div class="container">
  <div class="wrapper">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
  </div>
</div>

这篇关于仅在项目之间产生差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！