我刚刚注意到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</部门>;
<;div class=“block block-2”>;2</部门>;
<;div class=“block block-3”>;3</部门>;
<;div class=“block block-4”>;4</部门>;
<;div class=“block block-5”>;5</部门>;
</部门>
创建的值flex-end
和flex-start
(以及其他值)用于flex-layout
然而,W3C一直在开发框对齐模块,该模块建立了一组通用的对齐属性和值,用于多个框模型,包括flex、grid、table和block
因此,您看到的是更新的值,这些值最终将替换现有的特定于布局的值
以下是flexbox规范中对其的描述:
§;1.2. 单元
互动CSS框对齐模块扩展并取代
对齐属性(justify content
,align items
,
这里介绍了align self
,align content
)
网格规范中也有类似的语言。下面是一个例子:
§;10.1. 排水沟:
行间距
、列间距
、和间距
属性
行间距
和列间距
属性(及其间距
速记),
在栅格容器上指定时,定义栅格之间的檐槽
行和网格列。它们的语法在CSS框对齐3中定义
§8箱子之间的间隙
原始属性&ndash网格行间距,网格列间距
和网格间距
&ndash;没持续多久。虽然,为了向后兼容,我确信它们仍然受到尊重