跳转到主内容
极星编程网:以代码为星,赴技术山海!

如何在CSS中将align-self属性设置为其默认值?

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值。

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值。

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并避免对齐问题。

相关文章