具有间距的Css flexbox天沟

vbkedwbf  于 2023-06-07  发布在  其他
关注(0)|答案(8)|浏览(381)

我正在尝试在1行中内联3个项目。每个项目都必须有一点空间。问题是，当我添加边距时，第三个项目将换行。我已经尝试向父级添加负边距，但这不起作用。
我用我的问题做了一个例子，例子是使用tailwindcss：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
</head>
<body>
<div class="flex flex-wrap -m-2">
  <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div>  
  
   <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div> 
  
   <div class="bg-red-500 w-1/3 p-4 m-2">
    test
  </div> 
</div>
</body>
</html>

我不能删除flex-wrap，因为它必须每3个项目 Package 一次，而且我不能使用padding。
我怎么才能让它工作？

css

8条答案

按热度按时间
6mzjoqzu

6mzjoqzu1#

你的问题是你的div是父级宽度的1/3，但是当你在那里加上边距时，总宽度超过了100%。与padding不同，padding被计算为元素宽度的一部分，margin是元素宽度的一部分。
所以这里有两种可能的解决方案。第一种方法是将宽度设置为父宽度的1/3减去所需边距。由于您在示例中使用了m-2，根据Tailwind，它似乎是.5rem，因此我们将该数字加倍以考虑每个框的右侧和左侧的边距，最终结果如下：

.flex-wrap > div {
  width: calc(33.333333% - 1rem);
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
  <div class="bg-red-500 p-4 m-2">
    test
  </div>
</div>

如果你不喜欢这样，第二个选择，让你保持一个很好的简单的1/3宽度为每个div是使用一个边界上的每个是相同的颜色作为背景色。你的设计将需要如果这是可能的或不。显然，如果你有一个背景图像，或者你的div应该有边界，那么这可能不起作用（尽管你可以总是嵌套div来解决后一种情况下的问题）。

.flex-wrap > div {
  border: .5rem solid white;
}
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-wrap">
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
  <div class="bg-red-500 w-1/3 p-4">
    test
  </div>
</div>
赞(0）分享  回复(0）举报  2023-06-07
w6lpcovy

w6lpcovy2#

你需要对你的css做一些小的修改。由于父宽度为100%，每个子宽度为33.33%，因此它不会容纳在一行中沿着包括边距。边距在元素的顶部，因此总宽度变为> 100%，最后一个元素被移动到新的一行。
所以，我们在这里使用calc。我们需要有宽度的方式，可以容纳的利润。因此，如果width = calc（33.33% -20 px），这意味着每个div有20 px的空间，可以用来在每一边给予10 px的边距。为了保持一致性，请确保给定的裕度是从33.33%中减去的值的50%。
更新了代码（添加了样式标签并相应地修改了css）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
  <style>
    .test {
      width: calc(33.33% - 20px);
      margin: 10px;
    }
  </style>
</head>
<body>
<div class="flex flex-wrap">
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  <div class="bg-red-500 test p-4">
    test
  </div>  
  
   <div class="bg-red-500 test p-4">
    test
  </div> 
  
   <div class="bg-red-500 test p-4">
    test
  </div>
</div>
</body>
</html>

希望能帮上忙。回复以进行任何澄清。

赞(0）分享  回复(0）举报  2023-06-07
t9eec4r0

t9eec4r03#

如果你和我一样不喜欢使用33.33333333% -1rem，你可以使用一个内置的flexbox属性。
只需为每个项目设置规则flex: 1 0 0;，如下面的代码片段所示。
最后一个0告诉flexbox忽略每个项目的初始with，然后1告诉它增长，直到项目一起达到flexbox容器的完整宽度。（第一个0告诉它不要收缩得比它包含的文本小。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
  <style>
    .custom-flexbox-1 > div {
      flex: 1 0 0;
    }
    html {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="flex flex-wrap -m-2 custom-flexbox-1">
    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 m-2">
      test
    </div>
  </div>
</body>

</html>
赞(0）分享  回复(0）举报  2023-06-07
q3qa4bjr

q3qa4bjr4#

这肯定会按照您的链接标签工作：

<div class="flex flex-wrap " style="justify-content: space-evenly;">
    <div class="bg-red-500 p-4 m-2 " style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>

    <div class="bg-red-500 p-4 m-2" style="width: 30%;">
      test
    </div>
  </div>

检查：https://jsfiddle.net/sugandhnikhil/o62p7jez/

赞(0）分享  回复(0）举报  2023-06-07
j8ag8udp

j8ag8udp5#

一个选项可能是使用透明边框代替边距和背景剪辑，以避免在边框下绘制背景。

.bg-red-500 {
  border: 0.5em transparent solid;
  background-clip: padding-box;/* do not draw me where borders stand */
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

  <title>JS Bin</title>
</head>

<body>
  <div class="flex flex-wrap m-2">
    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>

    <div class="bg-red-500 w-1/3 p-4 ">
      test
    </div>
  </div>
</body>

</html>

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
background-clip CSS属性设置元素的背景是否延伸到其边框框、填充框或内容框之下。

赞(0）分享  回复(0）举报  2023-06-07
um6iljoc

um6iljoc6#

我不知道tailwind是怎么回事，但是使用vanilla CSS，我可以实现它不需要黑客calc，只需为每个孩子flex: 1;，为:not(:last-child)margin-right
当然，我也可以用CSS网格轻松地完成它（均匀地分布在项目中）。如果你提前知道只有3列，那么网格可能会更容易：

.container {
  height: 100px;
  background: red;
  display: flex;
}
.child {
  background: blue;
  flex: 1;
}
.child:not(:last-child) {
  margin-right: 10px;
}

/* Grid way */
.container-grid {
  height: 100px;
  background: red;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: 10px;
}
.child-grid {
  background: blue;
}

/* Even be easier if you know ahead that there're only 3 items */
.container-grid-3 {
  background: red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.child-grid-3 {
  height: 100px;
  background: blue;
}
<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<hr>

<div class="container-grid">
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
  <div class="child-grid"></div>
</div>

<hr>

<div class="container-grid-3">
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
  <div class="child-grid-3"></div>
</div>
赞(0）分享  回复(0）举报  2023-06-07
crcmnpdw

crcmnpdw7#

我认为使用Tailwind - Gap通过显示网格this更容易实现这一点。

<div class="grid gap-3 grid-cols-2">
    <div>01</div>
    <div>02</div>
</div>
赞(0）分享  回复(0）举报  2023-06-07
fiei3ece

fiei3ece8#

在许多情况下，您可以通过使用断点相关的flex-wrap / flex-nowrap来实现这一点，并且仅在需要时设置“间隙”。
举个例子。在大屏幕上，你不想打破线，并希望有元素之间的间隙：lg:flex-nowrap lg:gap-x-5 flex-wrap
您可以以不同的方式合并它以获得您想要的行为。

赞(0）分享  回复(0）举报  2023-06-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com