在CSS Flexbox中，为什么没有；“证明项目的合理性”；及；“自我辩护”；财产？

考虑柔性容器的主轴和横轴：

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

资料来源：

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

要沿横轴对齐弹性项目，有三个属性：

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

但是，这些方向可以很容易地与物业互换

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

属性

---

这些属性有用的场景：

• 将flex项目放置在flex容器的一角
  

  #box3{align self:flex end；justify self:flex end；}

• 使一组弹性项目向右对齐（

  justify content:flex end

  ），但使第一个项目向左对齐（

  justify self:flex start

  ）
  考虑带有一组导航项目和徽标的标题部分。使用

  justify self

  可以将徽标向左对齐，而导航项目保持在最右侧，整个系统可以根据不同的屏幕大小进行平滑调整（“弯曲”）

• 在一行三个柔性项目中，将中间项目粘贴到容器的中心（

  调整内容：中心

  ），并将相邻项目与容器边缘对齐（

  调整自我：柔性开始

  和

  调整自我：柔性结束

  ）
  请注意，值

  space-around

  和

  space-between

  处于启用状态

  justify content

  如果相邻项具有不同的宽度，则属性不会使中间项以容器为中心

#容器{
显示器：flex；
证明内容：之间的空间；
背景颜色：浅黄色；
}
.盒子{
高度：50px；
宽度：75px；
背景色：春绿；
}
.box1{
宽度：100px；
}
.box3{
宽度：200px；
}
#居中{
文本对齐：居中；
边缘底部：5px；
}
#中心>跨度{
背景色：浅绿色；
填充：2px；
}

真中心
请注意，只有当相邻框的宽度相等时，中间框才会真正居中。

这是在www样式列表和选项卡Atkins（等级库编辑器）中提出的。我会在这里详细说明一下

首先，我们假设flex容器是单行的（

flex-wrap:nowrap

）。在这种情况下，主轴和横轴之间显然存在对齐差异——主轴中堆叠了多个项目，但横轴中仅堆叠了一个项目。因此，在横轴上有一个可定制的每个项目“对齐自身”是有意义的（因为每个项目单独对齐），而在主轴上没有意义（因为在主轴上，项目是集体对齐的）

对于多线flexbox，相同的逻辑适用于每个“flex line”。在给定的行中，项目在横轴上单独对齐（因为在横轴上，每行只有一个项目），而在主轴上集中对齐

---

这里有另一种说法：所有的

*-self

和

*-content

属性都是关于如何在事物周围分配额外空间的。但关键的区别在于，

*-self

版本适用于该轴中只有一个东西的情况，

*-content

版本适用于该轴中可能有很多东西的情况。“一件事”与“许多事”场景是不同类型的问题，因此它们有不同类型的可用选项——例如，/值之间的

空格对
*-content
有意义，但对
*-self
没有意义

所以：在flexbox的主轴上，有很多东西可以分配空间。因此，
*-content
属性在这里是有意义的，但不是
*-self
属性

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

相反，在横轴中，我们有一个
*-self
和一个
*-content
属性。其中一个决定了我们将如何在多条柔性线（
align content
）周围分配空间，而另一个（
align self
）决定了如何在给定柔性线内在横轴上的各个柔性项目周围分配空间

（我在这里忽略
*-items
属性，因为它们只是为
*-self
建立默认值）
我知道这不是一个答案，但我愿意为这件事做出贡献。如果他们能够为flexbox发布
justify self
，使其真正具有灵活性，那就太好了

我认为，当轴上有多个项目时，
justify self
最合理的行为方式是将自身与其最近的邻居（或边缘）对齐，如下所示

我真的希望，W3C注意到这一点，至少会考虑它。p>

这样，无论左右框的大小，都可以使项目真正居中。当其中一个盒子到达中心盒子的点时，它将简单地推动它，直到没有更多的空间来分配


制作令人敬畏的布局是无止境的，看看这个“复杂”的例子

沿主轴对齐弹性项目的方法
如问题所述