在CSS Flexbox中，为何没有“ justify-items”和“ justify-self”属性？

时间 2020-01-08

标签 css flexbox 为何没有 justify items self 属性栏目 CSS 繁體版

原文原文链接

考虑伸缩容器的主轴和横轴： css

_{资料来源： W3C} html

要沿主轴对齐弹性项目，有一个属性： css3

justify-content

要沿十字轴对齐弹性项目，须要三个属性： spring

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

可是，这些方向能够很容易地与flex-direction属性互换。编辑器

/* 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;

（交叉轴始终垂直于主轴。） ide

在描述轴的工做方式时，个人观点是，任一方向彷佛都没有什么特别之处。主轴，横轴在重要性方面均相等，而且flex-direction使其易于来回切换。布局

那么，为何十字轴具备两个附加的对齐属性？ flex

为何将align-content和align-items合并为主轴的一个属性？ flexbox

为何主轴没有得到“ justify-self属性？

这些属性将有用的方案：

将flex项目放在flex容器的角落
#box3 { align-self: flex-end; justify-self: flex-end; }
使一组flex项右对齐（ justify-content: flex-end ），但使第一个justify-content: flex-end项向左对齐（ justify-self: flex-start ）
考虑带有一组导航项和徽标的标题部分。 经过justify-self ，徽标能够在左侧对齐，而导航项保持在最右侧，而且整个对象能够平滑调整（“弯曲”）以适应不一样的屏幕尺寸。
在三个flex项目的行中，将中间项目粘贴到容器的中心（ justify-content: center ），并将相邻的项目与容器边缘对齐（ justify-self: flex-start和justify-self: flex-end ）。
请注意，若是相邻项目的宽度不一样，则justify-content属性上的space-around和space-between值将不会使中间项目以容器为中心。

#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版本

在撰写本文时，在flexbox规范中尚未说起justify-self或justify-items 。

可是，在CSS Box Alignment Module中，这是W3C还没有完成的建议，用于创建一套通用的对齐属性以供全部Box模型使用，其中包括：

_{资料来源： W3C}

您会注意到，考虑了justify-self和justify-items ... 但对于flexbox却没有 。

最后，我重申主要问题：

为何没有“证实项目”和“自我证实”属性？

#1楼

这是在www样式列表中提出的，Tab Atkins（规范编辑器）提供了一个解释缘由的答案。我会在这里详细说明。

首先，让咱们首先假设咱们的flex容器是单行的（ flex-wrap: nowrap ）。在这种状况下，主轴和横轴之间显然存在对齐差别-主轴上堆叠了多个项目，但在横轴上仅堆叠了一个项目。所以，在横轴上有一个可自定义的“ align-self”项是有意义的（由于每一个项目都是单独对齐的），而在主轴上则没有意义（由于在那里，项目统一排列）。

对于多行flexbox，相同的逻辑适用于每一个“ flex line”。在给定的行中，项目在横轴上单独对齐（由于在横轴上每行只有一个项目），而在主轴上则是统一排列。

这是短语的另外一种表达方式：所以，全部 *-self和*-content *-self属性都与如何在事物周围分配额外的空间有关。但关键的区别是， *-self版本的状况下，只能有一个在该轴一个单一的东西 ，而*-content版本时，有在轴可能不少事情 。单物与多物场景是不一样类型的问题，所以它们具备不一样类型的可用选项，例如， *-content space-around值/ space-between值对*-content有意义，但对于*-self却不适用*-self 。

SO：在flexbox的主轴上，有不少东西能够分配空间。所以，一个*-content属性是有道理的有，但不是*-self属性。

相反，在交叉轴，咱们既是*-self和*-content属性。一个决定了咱们如何在许多弯曲线（ align-content ）周围分配空间，而另外一个（ align-self ）肯定了如何在给定的弯曲线内在交叉轴上的各个弯曲项目周围分配空间。

（我在这里忽略*-items属性，由于它们只是为*-self创建默认值。）

#2楼

我知道这不是答案，可是我想为这个问题作出贡献。若是他们能够为flexbox发布justify-self以使其真正具备灵活性，那将是很好的。

我相信，当轴上有多个项目时， justify-self行为的最合乎逻辑的方式是使其自身与最近的邻居（或边缘）对齐，以下所示。

我真正但愿W3C注意到这一点，至少会考虑一下。 =）

这样，您可使项目真正居中，而无需考虑左右框的大小。当其中一个盒子到达中心盒子的位置时，它会简单地将其推入，直到没有更多的空间可分配。

制做出色布局的简便性无穷无尽，请看一下这个“复杂”示例。

#3楼

沿主轴对齐弹性项目的方法

如问题所述：

要沿主轴对齐弹性项目，有一个属性： justify-content

要使弹性项沿横轴align-content ，有三个属性： align-content ， align-items和align-self 。

而后问题问：

为何没有justify-items和justify-self属性？

一个答案多是： 由于没有必要。

flexbox规范提供了两种沿主轴对齐弹性项目的方法：

justify-content关键字属性，以及
auto边距

证实内容

justify-content属性将flex项目沿flex容器的主轴对齐。

它应用于flex容器，但仅影响flex项目。

有五个对齐选项：

flex-start start〜Flex项目包装在行的开头。
flex-end end〜Flex项目包装在行尾。
center 〜柔性物品被包装到生产线的中心。
space-between 〜Flex的项都均匀地隔开，具备对齐到容器的一个边缘对准到相对的边缘的最后一个项目的第一项。第一项和最后一项使用的边缘取决于flex-direction和写入模式（ ltr或rtl ）。
space-around 〜与space-between相同，但两端均留有一半大小的间隔。

自动保证金

使用auto边距，能够将弹性项目居中，隔开或打包成子组。

与应用于flex容器的justify-content不一样，flex项具备auto边距功能。

它们经过消耗指定方向上的全部可用空间来工做。

将一组弹性项目向右对齐，但将第一项向左对齐

问题的场景：

使一组flex项右对齐（ justify-content: flex-end ），但使第一个justify-content: flex-end项向左对齐（ justify-self: flex-start ）
考虑带有一组导航项和徽标的标题部分。 经过justify-self ，徽标能够在左侧对齐，而导航项保持在最右侧，而且整个对象能够平滑调整（“弯曲”）以适应不一样的屏幕尺寸。

其余有用的方案：

将弹性项目放在角落

问题的场景：

将flex项目放置在角落.box { align-self: flex-end; justify-self: flex-end; } .box { align-self: flex-end; justify-self: flex-end; }

将弹性项目垂直和水平居中

margin: auto是justify-content: center和align-items: center的替代方法。

代替在flex容器上的此代码：

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

您能够在flex项目上使用它：

.box56 {
    margin: auto;
}

当居中溢出容器的flex项目居中时，此替代方法颇有用。

将弹性项目居中，将第二个弹性项目居中于第一个和边缘之间

flex容器经过分配可用空间来对齐flex项目。

所以，为了建立平衡，以便中间物品能够在容器中居中放置单个物品，必须引入平衡。

在下面的示例中，引入了不可见的第三柔性项目（框61和68）以平衡“真实”项目（框63和66）。

固然，就语义而言，此方法并非什么好事。

另外，您可使用伪元素代替实际的DOM元素。或者，您可使用绝对定位。此处介绍了全部三种方法： 居中对齐和底部对齐的弹性项目

注意：仅当最外层项目的高度/宽度相等时，以上示例才有效（就真正居中而言）。 若是弹性商品的长度不一样，请参见下一个示例。

当相邻项目的大小不一样时，将弹性项目居中

问题的场景：

在三个flex项目的行中，将中间项目粘贴到容器的中心（ justify-content: center ），并将相邻的项目与容器边缘对齐（ justify-self: flex-start和justify-self: flex-end ）。
请注意，若是相邻项目的宽度不一样，则justify-content属性上的space-around和space-between值将不会使中间项目相对于容器居中（请参见demo ）。

如前所述，除非全部flex项目的宽度或高度相同（取决于flex-direction ），不然中间项目没法真正居中。这个问题为justify-self属性（固然是设计用来处理任务）提供了强有力的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规范容许弹性项目的绝对定位。这使得中间项目能够完美地居中，而不考虑其同级大小。

请记住，与全部绝对定位的元素同样，这些项目也会从文档流中删除。这意味着它们不会占用容器中的空间，而且可使它们的兄弟姐妹重叠。

在如下示例中，中间项目以绝对定位为中心，而外部项目保持流入。可是，能够经过相反的方式实现相同的布局：将中间项目justify-content: center并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 ）都是一个弹性项目。
每一个.box项都指定了flex: 1以便平均分配容器空间。
如今，这些项目占用了该行中的全部空间，而且宽度相等。
使每一个项目成为一个（嵌套的）flex容器，并添加justify-content: center 。
如今，每一个span元素都是一个居中的flex项目。
使用弹性auto边距左右移动外部span 。

您也能够放弃justify-content而仅使用auto边距。

可是justify-content能够在这里工做，由于auto边距始终是优先事项。从规格：

8.1。 与auto边距对齐

在经过justify-content和align-self以前，任何正的自由空间都会分配给该维度中的自动边距。

证实内容：空间相同（概念）

回到正justify-content一分钟，这里是一个更多选择的想法。

space-same same〜 space-between和space-around 。 Flex项目的间距是均匀的（例如space-between ），除了两端没有半角空格（如space-around ）外，两端都有全角空格。

可使用flex容器上的::before和::after伪元素来实现此布局。

^{（信用： @oriol表明代码， @crl表明标签）}

更新：浏览器已开始实现space-evenly ，从而完成了上述任务。有关详细信息，请参见此帖子：伸缩项目之间的间距相等

PLAYGROUND （包括上面全部示例的代码）

#4楼

有justify-self ，可是在Chrome Canary中，而不在Chrome稳定版本中。甚至justify-items ：

但据我所知，这些属性也不起做用。所以，可能Google事先将其保存了以用于未来的CSS版本。只能但愿他们会尽快添加属性。

#5楼

我知道这不使用flexbox，可是对于三个项目的简单用例（一个在左边，一个在中心，一个在右边），可使用display: grid轻松实现display: grid父display: grid上的grid-area: 1/1/1/1; ， grid-area: 1/1/1/1; 在孩子justify-self ，并justify-self这些孩子justify-self定位justify-self 。

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;"> <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div> <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div> <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div> </div>