在CSS Flexbox中,为什么没有;“证明项目的合理性”;及;“自我辩护”;财产?
考虑柔性容器的主轴和横轴:在CSS Flexbox中,为什么没有;“证明项目的合理性”;及;“自我辩护”;财产?,css,flexbox,language-lawyer,w3c,Css,Flexbox,Language Lawyer,W3c,考虑柔性容器的主轴和横轴: .container { justify-content: center; align-items: center; } 资料来源: 要沿主轴对齐弹性项目,有一个属性: 要沿横轴对齐弹性项目,有三个属性: 在上图中,主轴是水平的,横轴是垂直的。这些是flex容器的默认方向 但是,这些方向可以很容易地与物业互换 /* main axis is horizontal, cross axis is vertical */ flex-dir
.container {
justify-content: center;
align-items: center;
}
资料来源:
要沿主轴对齐弹性项目,有一个属性:
/* 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>
这样,无论左右框的大小,都可以使项目真正居中。当其中一个盒子到达中心盒子的点时,它将简单地推动它,直到没有更多的空间来分配
制作令人敬畏的布局是无止境的,看看这个“复杂”的例子
沿主轴对齐弹性项目的方法
如问题所述