CSS 或级联样式表是一个功能强大的工具，它提供了一系列用于在网页上对齐和定位元素的属性。 align-self 属性是 CSS 中可用的众多属性之一，用于调整 Flex 容器内各个 Flex 项目的对齐方式。默认情况下，align-self设置为auto，这意味着该元素将继承其父容器的对齐方式。但是，可以通过设置 align-self 属性来更改各个 Flex 项目的此行为。
scc selector{align-self: auto;}
CSS中的align-self属性
在我们讨论如何将align-self属性重置为其默认值之前，了解align-self是什么非常重要。 align-self 属性是 flex 简写属性的子属性；它用于沿容器的横轴对齐单个弹性项目。 align-self 属性的默认值为auto，这会导致元素继承其父容器的align-items 属性。 align-self 属性可以设置为以下值之一 –
自动（默认），
Flex 启动，
立即学习“前端免费学习笔记（深入）”；
Flex 端，
中心，
基线，以及
拉伸
如果将align-self属性设置为auto以外的值，它将覆盖该特定元素的容器的align-items属性。
将align-self重置为CSS中的默认值
要将align-self属性重置为其默认值，只需从元素的CSS声明中删除该属性的auto值即可。例如
.element { align-self: center;}
当从声明中删除align-self属性时，它会重置为其默认值。
.element { /* align-self: center; */}
现在，我们将探讨几个在 CSS 中将align-self 属性重置为其默认值的示例。
使用自动值
将align-self属性重置为其默认值的简单方法是将其设置为auto。当align-self的值设置为auto时，Flex项目将根据Flex容器上设置的align-items属性的值进行对齐。
示例
在此示例中，我们将使用 auto 值来选择所有不具有 .div1 或 .div3 类的 .item 元素，并将其align-self 属性设置为 auto。这将确保只有 .div1 和 .div3 以及元素具有自定义的align-self值。
body { text-align: center; } .container { display: flex; justify-content: center; align-items: center; height: 200px; background-color: lightgray; } .item { width: 100px; height: 50px; background-color: white; border: 1px solid black; margin: 10px; } .div1 { align-self: flex-start; } .div2 { align-self: auto; } .div3 { align-self: flex-end; } Set align-self property to its default value using the align-self:auto
HTML CSS JavaScript
使用 :not() 选择器
:not() 选择器是将align-self 属性重置为其默认值的另一种方法。该选择器允许选择不符合特定条件的所有元素。使用 :not() 选择器，我们可以选择除那些我们想要应用特定的align-self值的元素之外的所有元素。
示例
在此示例中，我们将使用 :not() 选择器来选择所有不具有 .box1 或 .box3 类的 .item 元素，并将其align-self 属性设置为 auto。这将确保只有 .box1 和 .box3 以及元素具有自定义的align-self值。
h1, h3{ text-align:center;} .container { display: flex; justify-content: center; align-items: center; height: 200px; background-color: lightgray; } .item:not(.box1):not(.box3) { align-self: auto;} .item { width: 100px; height: 50px; border: 1px solid black; margin: 10px; background-color:pink; } .box1 { align-self: flex-start; background-color:lightgreen;} .box3 { align-self: flex-end; background-color:lightblue; } Set align-self property to its default value using the :not() selector
Java Python PHP
结论
align-self 属性是一个强大的工具，用于设置 Flex 容器内 Flex 项目的垂直对齐方式。然而，有时我们可能需要将CSS中的align-self属性重置为其默认值。通过将align-self属性重置为默认值auto，或者使用align-items代替，我们可以简化CSS并避免对齐问题。
以上就是如何在CSS中将align-self属性设置为其默认值？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626281.html
微信扫一扫 
支付宝扫一扫 
