資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 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 簡寫屬性的子屬性；它用於沿容器的交叉軸對齊單個 Flex 專案。align-self 屬性的預設值為 auto，這會導致元素繼承其父容器的 align-items 屬性。align-self 屬性可以設定為以下值之一：
Auto（預設）
Flex-start
Flex-end
Center
Baseline，以及
Stretch
如果將 align-self 屬性設定為 auto 以外的值，則會覆蓋該特定元素的容器的 align-items 屬性。
在 CSS 中將 align-self 重置為預設值
要將 align-self 屬性重置為其預設值，只需從元素的 CSS 宣告中刪除該屬性的 auto 值即可。例如：
.element {
align-self: center;
}
當從宣告中刪除 align-self 屬性時，它將重置為其預設值。
.element {
/* align-self: center; */
}
現在，我們將探討在 CSS 中將 align-self 屬性重置為預設值的幾個示例。
使用 Auto 值
將 align-self 屬性重置為其預設值的最簡單方法是將其設定為 auto。當 align-self 的值為 auto 時，Flex 專案將根據在 Flex 容器上設定的 align-items 屬性進行對齊。
示例
在此示例中，我們將使用 auto 值來選擇所有不具有 .div1 或 .div3 類的 .item 元素，並將它們的 align-self 屬性設定為 auto。這將確保只有 .div1 和 .div3 元素具有自定義 align-self 值。
<!DOCTYPE html>
<html>
<head>
<style>
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; }
</style>
</head>
<body>
<h3>Set align-self property to its default value using the align-self:auto</h3>
<div class="container">
<div class="item div1">HTML</div>
<div class="item div2">CSS</div>
<div class="item div3">JavaScript</div>
</div>
</body>
</html>
使用 :not() 選擇器
:not() 選擇器是將 align-self 屬性重置為其預設值的另一種方法。此選擇器允許選擇所有不匹配特定條件的元素。使用 :not() 選擇器，我們可以選擇除那些我們想要應用特定 align-self 值的元素之外的所有元素。
示例
在此示例中，我們將使用 :not() 選擇器來選擇所有不具有 .box1 或 .box3 類的 .item 元素，並將它們的 align-self 屬性設定為 auto。這將確保只有 .box1 和 .box3 元素具有自定義 align-self 值。
<!DOCTYPE html>
<html>
<head>
<style>
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; }
</style>
</head>
<body>
<h3>Set align-self property to its default value using the :not() selector</h3>
<div class="container">
<div class="item box1">Java</div>
<div class="item">Python</div>
<div class="item box3">PHP</div>
</div>
</body>
</html>
結論
align-self 屬性是用於設定 Flex 佈局容器內 Flex 專案垂直對齊的強大工具。但是，有時我們需要在 CSS 中將 align-self 屬性重置為其預設值。透過將 align-self 屬性重置為其預設值 auto，或者改用 align-items，我們可以簡化 CSS 並避免對齊問題。
瀏覽量：225
