css - 在 CSS Flexbox 中，为什么没有 "justify-items"和 "justify-self"属性？

Question

考虑 flex 容器的主轴和横轴:


来源:W3C

要沿主轴对齐 flex 元素，有一个属性:

justify-content

要沿交叉轴对齐 flex 元素，有三个属性:

align-content

align-items

align-self

在上图中，主轴是水平的，横轴是垂直的。这些是 flex 容器的默认方向。

但是，这些方向可以很容易地与 flex-direction 互换。属性(property)。

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴总是垂直于主轴。)

我在描述轴如何工作时的观点是，这两个方向似乎都没有什么特别之处。主轴，横轴，它们的重要性相等， flex-direction使来回切换变得容易。

那么为什么交叉轴会获得两个额外的对齐属性呢？

为什么是 align-content和 align-items合并为主轴的一个属性？

为什么主轴没有得到 justify-self属性(property)？

这些属性有用的场景:

在 flex 容器的 Angular 落放置一个 flex 元素#box3 { align-self: flex-end; justify-self: flex-end; }

使一组 flex 元素右对齐( justify-content: flex-end )但第一个元素左对齐( justify-self: flex-start )

考虑带有一组导航元素和徽标的标题部分。与 justify-self徽标可以左对齐，而导航元素保持在最右边，并且整个事情可以平滑地调整(“flex ”)以适应不同的屏幕尺寸。

在一行三个 flex 元素中，将中间元素固定到容器的中心 ( justify-content: center ) 并将相邻元素与容器边缘对齐 ( justify-self: flex-start 和 justify-self: flex-end )。

请注意值 space-around和 space-between在justify-content如果相邻元素具有不同的宽度，则属性不会使中间元素以容器为中心。

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle version

在撰写本文时，没有提及 justify-self或 justify-items在 flexbox spec .

然而，在 CSS Box Alignment Module ，这是 W3C 的未完成提案，旨在建立一组通用的对齐属性以供所有框模型使用，它是这样的:


来源: W3C

你会注意到 justify-self和 justify-items正在考虑......但不适用于 flexbox。

最后，我将重申主要问题:

Why are there no "justify-items" and "justify-self" properties?

Answer 1

沿主轴对齐 Flex 元素的方法

如问题所述:

To align flex items along the main axis there is one property: justify-content

To align flex items along the cross axis there are three properties: align-content, align-items and align-self.

然后问题问:

Why are there no justify-items and justify-self properties?

一个答案可能是:因为它们不是必需的。

flexbox specification提供了两种沿主轴对齐 flex 元素的方法:

justify-content关键字属性，和

auto margins

证明内容

justify-content 属性沿 flex 容器的主轴对齐 flex 元素。

它应用于 flex 容器，但只影响 flex 元素。

有五个对齐选项:

flex-start ~ Flex 元素被打包到生产线的开头。

flex-end ~ Flex 元素被打包到行尾。

center ~ Flex 元素被包装到线的中心。

space-between ~ Flex 元素均匀分布，第一个元素与容器的一个边缘对齐，最后一个元素与相对的边缘对齐。第一个和最后一个元素使用的边取决于 flex-direction 和 writing mode ( ltr 或 rtl )。

space-around ~ 同 space-between除了两端有一半大小的空间。

自动 margin

与 auto margins , flex 元素可以居中、隔开或打包成子组。

不像 justify-content ，应用于 flex 容器， auto flex 元素的边距。

它们通过消耗指定方向上的所有可用空间来工作。

将一组 flex 元素向右对齐，但将第一个元素向左对齐

问题中的场景:

• making a group of flex items align-right (justify-content: flex-end) but have the first item align left (justify-self: flex-start)

  Consider a header section with a group of nav items and a logo. With justify-self the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes.

其他有用的场景:







在 Angular 落放置一个 flex 元素

问题中的场景:

• placing a flex item in a corner .box { align-self: flex-end; justify-self: flex-end; }

垂直和水平居中一个 flex 元素


margin: auto是 justify-content: center 的替代品和 align-items: center .

而不是 flex 容器上的这段代码:

.container {
    justify-content: center;
    align-items: center;
}

您可以在 flex 元素上使用它:

.box56 {
    margin: auto;
}

当 centering a flex item that overflows the container 时，此替代方法很有用.

将一个 flex 元素居中，并在第一个和边缘之间居中第二个 flex 元素

flex 容器通过分配可用空间来对齐 flex 元素。

因此，为了创造平等的平衡，使一个中间元素可以在容器中居中，一个元素在旁边，必须引入平衡。

在下面的示例中，引入了不可见的第三 flex 元素(框 61 和 68)以平衡“真实”元素(框 63 和 66)。





当然，这种方法在语义上没什么了不起。

或者，您可以使用伪元素而不是实际的 DOM 元素。或者您可以使用绝对定位。此处涵盖了所有三种方法: Center and bottom-align flex items

注意:以上示例仅在最外层元素的高度/宽度相等时才有效——就真正的居中而言。当 flex 元素的长度不同时，请参见下一个示例。

当相邻元素的大小不同时将 flex 元素居中

问题中的场景:

• in a row of three flex items, affix the middle item to the center of the container (justify-content: center) and align the adjacent items to the container edges (justify-self: flex-start and justify-self: flex-end).

  Note that values space-around and space-between on justify-content property will not keep the middle item centered in relation to the container if the adjacent items have different widths (see demo).

如前所述，除非所有 flex 元素的宽度或高度相等(取决于 flex-direction)，否则中间元素不能真正居中。这个问题为 justify-self 提供了强有力的理由。属性(当然，旨在处理任务)。

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

这里有两种方法可以解决这个问题:

解决方案#1:绝对定位

flexbox 规范允许 absolute positioning of flex items .这允许中间元素完全居中，而不管其 sibling 的大小。

请记住，与所有绝对定位的元素一样，元素将从 document flow 中删除。 .这意味着它们不占用容器中的空间并且可以重叠它们的兄弟。

在下面的示例中，中间元素以绝对定位居中，外部元素保持流入。但是可以以相反的方式实现相同的布局:将中间元素与 justify-content: center 居中并绝对定位外部元素。



解决方案 #2:嵌套 Flex 容器(无绝对定位)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

这是它的工作原理:

顶级 div ( .container ) 是一个 flex 容器。

每个子 div ( .box ) 现在都是一个 flex 元素。

每个.box元素已给出 flex: 1为了平均分配容器空间。

现在这些元素消耗了行中的所有空间并且宽度相等。

使每个元素成为(嵌套的) flex 容器并添加 justify-content: center .

现在各span element 是一个居中的 flex 元素。

使用 flex auto移动外部的边距 span s 左右。

您也可以放弃 justify-content并使用 auto仅边距。

但是 justify-content可以在这里工作，因为 auto边距始终具有优先权。从规范:

8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

justify-content:空间相同(概念)

返回 justify-content 等一下，这里有一个更多选择的想法。

space-same ~ space-between的混合体和 space-around . Flex 元素是均匀间隔的(如 space-between )，除了两端的半 Angular 空格(如 space-around )之外，两端都有全尺寸的空格。

这种布局可以通过 ::before 实现和 ::after flex 容器上的伪元素。



(来源: @oriol 代码， @crl 标签)

更新:浏览器已开始实现 space-evenly , 完成上述操作。详情请看这篇文章: Equal space between flex items

PLAYGROUND (包括上述所有示例的代码)