Flexbox:灵活启动、自启动和启动;有什么区别?

我刚刚注意到align self属性的一些值,这是我以前从未见过的。什么是开始结束自启动自结束以及它们与柔性开始柔性结束的区别是什么

当我使用flexbox时,我经常参考CSS技巧指南,但它没有提到这些值。我在MDN上阅读了align self的文档,但是对这些值的一行描述还不足以让我理解

我想我也许可以玩弄这些价值观来找出答案,但它们似乎都在做同样的事情

.container{
显示器:flex;
证明内容:中心;
对齐项目:居中;
背景:番木瓜;
宽度:400px;
高度:200px;
保证金:1rem自动;
盒影:0px 0px 5px 1px rgba(0,0,0,0.2);
边界半径:0.5em;
}
.街区{
颜色:白色;
字号:3em;
字体系列:无衬线;
填充:0.5雷姆;
保证金:0.5雷姆;
显示器:flex;
证明内容:中心;
对齐项目:居中;
}
1号楼{
背景:红色;
}
.第2区{
背景:橙色;
}
.第3区{
背景:金;
}
.第4区{
背景:绿色;
}
.第5区{
背景:蓝色;
}
.第2区{
自我校准:灵活启动;
}
.第3区{
对齐自我:开始;
}
.第4区{
自对准:自启动;
}
<div class=“container”>
<div class=“block block-1”>1&lt/部门>
<div class=“block block-2”>2&lt/部门>
<div class=“block block-3”>3&lt/部门>
<div class=“block block-4”>4&lt/部门>
<div class=“block block-5”>5&lt/部门>
&lt/部门&gt

创建的值flex-endflex-start(以及其他值)用于flex-layout

然而,W3C一直在开发框对齐模块,该模块建立了一组通用的对齐属性和值,用于多个框模型,包括flex、grid、table和block

因此,您看到的是更新的值,这些值最终将替换现有的特定于布局的值

以下是flexbox规范中对其的描述:

§1.2. 单元
互动

CSS框对齐模块扩展并取代
对齐属性(justify contentalign items
这里介绍了align selfalign content

网格规范中也有类似的语言。下面是一个例子:

§10.1. 排水沟:行间距列间距、和间距
属性

行间距列间距属性(及其间距速记),
在栅格容器上指定时,定义栅格之间的檐槽
行和网格列。它们的语法在CSS框对齐3中定义
§8箱子之间的间隙

原始属性&ndash网格行间距网格列间距网格间距–没持续多久。虽然,为了向后兼容,我确信它们仍然受到尊重

发表评论