设置 flexbox 项目之间距离的更好方法 [英] Better way to set distance between flexbox items

问题描述

要设置 flexbox 项目之间的最小距离，我在 .item 和 margin: 0 -5px 上使用 margin: 0 5px容器.对我来说，这似乎是一种黑客行为，但我找不到更好的方法来做到这一点.

示例

#box {显示:弹性；宽度:100px；边距:0 -5px；}.物品 {背景:灰色；宽度:50px；高度:50px；边距:0 5px；}

<div class='item'></div><div class='item'></div><div class='item'></div><div class='item'></div>

解决方案

• Flexbox 没有折叠边距.
• Flexbox 没有任何类似于 border-spacing 的表格(CSS 属性 gap 在较新的浏览器中扮演这个角色，我可以使用吗)

因此，实现您的要求要困难一些.

根据我的经验，最干净"的不使用 :first-child/:last-child 并且无需对 flex-wrap:wrap 进行任何修改即可工作的方法是设置padding:5px 在容器上，margin:5px 在孩子上.这将在每个孩子之间以及每个孩子和他们的父母之间产生 10px 差距.

演示

.upper {边距:30px；显示:弹性；弹性方向:行；宽度:300px；高度:80px；边框:1px 红色实心；填充:5px；/* 这个 */}.upper >div {弹性:1 1 自动；边框:1px 红色实心；文本对齐:居中；边距:5px；/* 这将导致 10px 的差距 */}.upper.mc/* 多列测试 */{弹性方向:列；flex-wrap: 包裹;宽度:200px；高度:200px；}

<div>aaa<br/>aaa</div><div>aaa</div><div>aaa<br/>aaa</div><div>aaa<br/>aaa<br/>aaa</div><div>aaa</div><div>aaa</div>
<div class="upper mc"><div>aaa<br/>aaa</div><div>aaa</div><div>aaa<br/>aaa</div><div>aaa<br/>aaa<br/>aaa</div><div>aaa</div><div>aaa</div>

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. For me it seems like a hack, but I can't find any better way to do this.

Example

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

解决方案

• Flexbox doesn't have collapsing margins.
• Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

这篇关于设置 flexbox 项目之间距离的更好方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！