今天在写vue项目的时候遇到了一个样式布局的问题，如下我想使用flex布局，并且 “去计算” 这个元素可以右对齐（如下是设置好了的结果）。

这里我不想给左边两个盒子再包一层div。然后我就想着既然侧轴可以通过 align-self 对单个元素进行对齐，那么我能不能使用grid布局中的属性 justify-self 对主轴的元素进行单个对齐呢？

试了一下发现是不行的，然后我查了 MDN 发现在 Flexbox 中 justify-self 是无效的，下面是我对MDN的一些总结和理解：

为什么justify-self 在 Flexbox布局中失效？

MDN原话：在主轴上，Flexbox将我们的内容作为一个组进行处理。 计算布置子元素所需的空间量，然后剩余空间可用于分配。 justify-content属性控制剩余空间的使用方式。 设置justify-content：flex-end，额外空间放在所有子元素之前，justify-content：space-around，它放在该维度的子元素的两侧，等等。

意思就是在主轴上的弹性元素是作为一个组进行处理的，然后通过 justify-content 给这一组元素来分配剩余的空间。而 justify-self 是设置单个元素的对齐方式，这意味着在Flexbox中，justify-self 属性没有意义，因为我们总是处理移动整个元素组。

使用auto margins实现单个弹性元素的对齐功能：

那么虽然在Flexbox布局中主轴元素只能作为一个组来处理，但是我们可以通过 margin 来给单个盒子增加大小，通过变大占据剩余的空间来达到居中或左右对齐。

设置为auto的边距将吸收其中的所有可用空间。 这就也是以自动边距为中心的块的工作原理。 通过将左右边距设置为auto，我们块的两侧都会尝试占用所有可用空间，因此将盒子推入中心。

在我的项目中我给 “去计算” 这个元素设置margin-left就完成了。至于为什么弹性元素为什么不用设置display: block;还有width。我想可能是设置弹性弹性盒子后，这些弹性元素转换为了块元素，且自动计算出了宽度。从如下结果来看我的想法是正确的。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。