弹性项目之间的等距 [英] Equal space between flex items

问题描述

有没有办法在所有项目的两侧放置一个完整的空间单元，包括第一个和最后一个?

Is there a way to put a full unit of space on both sides of all items, including the first and last?

我试图找到一种方法，使 flexbox 子项的间距相等.

I am trying to find a way to have equal spacing around flexbox children.

在这篇文章中，这似乎是最接近的事情是 justify-content: space-around.它说:

In this article it seems like the nearest thing is justify-content: space-around. It says that:

space-around:项目均匀分布在一行中他们周围的空间.请注意，视觉上的空间不相等，因为所有项目的两侧都有相等的空间.第一项将靠着容器边缘有一个单位的空间，但有两个单位的空间下一项之间的空格 因为下一项有它自己的适用的间距.

space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

推荐答案

至少有两种方法可以使所有项目之间的间距相等，包括第一项和最后一项.然而，一种方法尚不完全支持浏览器.

There are at least two methods for equal space between all items, including the first and last items. One method, however, doesn't yet have full browser support.

请注意 Firefox 文档中的这一部分:

Note this section from Firefox documentation:

In-flow ::after 和::before 伪元素现在是 flex项.

In-flow ::after and ::before pseudo-elements are now flex items.

事实上，所有主流浏览器都将弹性容器上的伪元素视为弹性项目.

In fact, all major browsers consider pseudo-elements on a flex container to be flex items.

知道这一点后，将 ::before 和 ::after 添加到您的容器中.

Knowing that, add ::before and ::after to your container.

使用 justify-content: space-between 和零宽度伪元素，可见的 flex 项目将均匀分布.

With justify-content: space-between and zero-width pseudo-elements, the visible flex items will appear evenly spaced.

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS 框对齐模块，这是 W3C 未完成的提案建立一组通用的对齐属性以用于所有框模型，提供 space-evenly 值以用于 justify-content 和 align-content 属性.

The CSS Box Alignment Module, which is the W3C's unfinished proposal to establish a common set of alignment properties for use across all box models, provides the space-evenly value for use with the justify-content and align-content properties.

4.3.分布式对齐:stretch、space-between、space-around 和 space-evenly关键字

空间均匀

对齐对象均匀分布在对齐中容器，两端留有全尺寸空间.

The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.

对齐主题的分布使得任意两个相邻对齐主题之间的间距，在第一个对齐主题之前，在第一个对齐主题之后最后对齐主题相同.

The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

然而，在撰写本文时，它看起来 space-evenly 仅适用于 Firefox 和 Chrome.

As of this writing, however, it looks like space-evenly only works in Firefox and Chrome.

flex-container {
  display: flex;
  justify-content: space-evenly;
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

此外，这里有一个来自 MDN 的有用演示justify-content 页面，用于在浏览器中测试 space-evenly 和其他值.https://jsfiddle.net/gkrsr86n/

Also, here's a useful demo from the MDN justify-content page for testing space-evenly and other values in your browser. https://jsfiddle.net/gkrsr86n/

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