考虑伸缩容器的主轴和横轴:
资料来源:W3C
要沿主轴对齐弹性项目,有一个属性:
要沿十字轴对齐弹性项目,需要三个属性:
在上图中,主轴是水平的,而横轴是垂直的。这些是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;
(交叉轴始终垂直于主轴。)
在描述轴的工作方式时,我的观点是,任一方向似乎都没有什么特别之处。主轴,横轴在重要性上都相同,并且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
标志可以左对齐,而资产净值的项目留最右边,并顺利整件事调整(“挠曲”),以不同的屏幕尺寸。在三个伸缩项目的行中,将中间项目粘贴到容器的中心(
justify-content: center
),然后将相邻的项目与容器的边缘对齐(justify-self: flex-start
和justify-self: flex-end
)。请注意,如果相邻项目的宽度不同,则value
space-around
和space-between
onjustify-content
属性不会使中间项目保持在容器中心。
在撰写本文时,有没有提及justify-self
或justify-items
在Flexbox的规范。
但是,在CSS Box Alignment Module中,这是W3C尚未完成的建议,目的是建立一套通用的对齐属性供所有Box模型使用。
资料来源:W3C
您会注意到这一点justify-self
,justify-items
并且正在考虑... 但是对于flexbox而言却不是。
最后,我重申一个主要问题:
为什么没有“证明项目”和“自我证明”属性?
justify-content: flex-start
,所以项目开始时像| abcd |一样拥挤。如果justify-self: [anything]
在项目上放置项目'b' ,您希望它做什么?)
justify-self
弹性项目如何工作?我要说的是,与auto
margin在弹性项目上已经没有什么不同。在您的第二个示例中,justify-self: flex-end
在项d上会将其移动到最远的边缘。这本身就是一个很大的功能,auto
利润已经可以做到。我用示范发表了答案。
justify-content
和justify-self
指定的方式中,以免发生冲突的情况(例如我所询问的情况)被明确和明智地定义。正如我在这里的答案中所指出的那样,它{justify|align}-self
是关于在较大的盒子中{justify|align}-self
对齐项目,而该盒子的大小与值的大小无关 -主轴上没有这样的盒子可以将弹性项目对齐。
justify-self
和justify-content
互动,如果它们发生冲突(例如我提出的方案)。自动边距根本不与之交互justify-content
-它们在justify-content
获得使用机会之前会偷走所有包装空间。因此,自动页边距并不是一个很好的模拟方法。
justify-self
为弹性商品工作?假设项目a,b,c,d周围有多余的空间可分布,而flex容器具有justify-content: space-between
,那么它们最终的结果类似于| abcd |。justify-self: center
在其中的项目“ b”中添加eg 或“ justify-self:flex-end” 是什么意思?您希望它去哪里?(我在此处的答案之一中看到了一些演示,但我看不出它通常可以正常工作的明确方法。)