如何证明单个flexbox项的正当性（覆盖正当性内容）

AFAIK在规范中没有针对该属性的属性，但是这是我一直在使用的一个技巧：将容器元素（带有的容器元素display:flex）设置为，justify-content:space-around 然后在第一项和第二项之间添加一个额外的元素并将其设置为flex-grow:10（或一些与您的设置配合使用的其他值）

编辑：如果项目紧密对齐，则最好也添加flex-shrink: 10;到额外元素，因此布局将在较小的设备上正确响应。

对于您做的项目宽度要将这些情况flex-end是已知的，你可以自己挠设置为“0 0 ## PX”，并设置你想要的项目flex-start与flex:1

这将导致伪flex-start项目填充容器，只需将其格式化为text-align:left或其他格式即可。

好像justify-self即将要进入浏览器。在MDN上已经有一篇文章。在撰写本文时，浏览器支持不佳。

关于边距解决方案：我有一个带间隙的Flexbox网格。flex-gapFlexbox 没有属性（尚未？）。因此，对于装订线，我正在使用填充和边距，因此margin: auto需要覆盖其他边距...

通过将内部项目的样式设置为，我解决了类似的情况margin: 0 auto。
情况：我的菜单通常包含三个按钮，在这种情况下，必须为justify-content: space-between。但是，当只有一个按钮时，它现在将居中对齐而不是向左对齐。

如果您实际上并不局限于将所有这些元素都保留为兄弟节点，则可以将这些元素包装在另一个默认的flex框中，并使两者的容器之间都使用空格。

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

或者，如果您对flex-start和flex-end进行了相同的操作，则只需交换default-flex容器和独生子的顺序即可。

似乎没有要justify-self，但你可以达到同样的效果的设置适当margin，以auto¹。例如 对于flex-direction: row（默认），您应该设置margin-right: auto为将孩子向左对齐。

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹ This behaviour is defined by the Flexbox spec.