Heim >Web-Frontend >CSS-Tutorial >Wie setze ich die Eigenschaft align-self in CSS auf ihren Standardwert?
Wie setze ich die Eigenschaft align-self in CSS auf ihren Standardwert?
- WBOYnach vorne
- 2023-09-23 15:53:02799Durchsuche
CSS oder Cascading Style Sheets ist ein leistungsstarkes Tool, das eine Reihe von Eigenschaften zum Ausrichten und Positionieren von Elementen auf einer Webseite bereitstellt. Die Eigenschaft align-self ist eine von vielen in CSS verfügbaren Eigenschaften, um die Ausrichtung einzelner Flex-Elemente innerhalb eines Flex-Containers anzupassen. Standardmäßig ist align-self auf „Auto“ eingestellt, was bedeutet, dass das Element die Ausrichtung seines übergeordneten Containers erbt. Dieses Verhalten kann jedoch für einzelne Flex-Elemente geändert werden, indem die Eigenschaft align-self festgelegt wird.
scc selector{
align-self: auto;
}
align-self-Attribut in CSS
Bevor wir besprechen, wie die Eigenschaft „align-self“ auf ihren Standardwert zurückgesetzt wird, ist es wichtig zu verstehen, was „align-self“ ist. Die align-self-Eigenschaft ist eine Untereigenschaft der Flex-Kurzformeigenschaft; sie wird verwendet, um ein einzelnes Flex-Element entlang der horizontalen Achse des Containers auszurichten. Der Standardwert des align-self-Attributs ist auto, wodurch das Element das align-items-Attribut seines übergeordneten Containers erbt. Das Attribut align-self kann auf einen der folgenden Werte gesetzt werden -
Auto (Standard),
Flex-Start,
Flexible Seite,
Mitte,
Grundlinie und
Strecken
Wenn Sie das Attribut align-self auf einen anderen Wert als auto setzen, überschreibt es das Attribut align-items des Containers für dieses bestimmte Element.
Align-self auf den Standardwert in CSS zurücksetzen
Um das align-self-Attribut auf seinen Standardwert zurückzusetzen, entfernen Sie einfach den Auto-Wert des Attributs aus der CSS-Deklaration des Elements. Zum Beispiel
.element {
align-self: center;
}
Wenn das align-self-Attribut aus der Deklaration entfernt wird, wird es auf seinen Standardwert zurückgesetzt.
.element {
/* align-self: center; */
}
Jetzt werden wir einige Beispiele für das Zurücksetzen der Eigenschaft align-self auf ihren Standardwert in CSS untersuchen.
Automatische Werte verwenden
Eine einfache Möglichkeit, die Eigenschaft „align-self“ auf ihren Standardwert zurückzusetzen, besteht darin, sie auf „auto“ zu setzen. Wenn der Wert von align-self auf „auto“ gesetzt ist, werden Flex-Elemente entsprechend dem Wert der im Flex-Container festgelegten Eigenschaft „align-items“ ausgerichtet.
Beispiel
In diesem Beispiel verwenden wir den Auto-Wert, um alle .item-Elemente auszuwählen, die keine .div1- oder .div3-Klasse haben, und setzen ihr align-self-Attribut auf auto. Dadurch wird sichergestellt, dass nur .div1- und .div3-Elemente über benutzerdefinierte align-self-Werte verfügen.
<!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>
Verwenden Sie den Selektor :not()
Der Selektor:not() ist eine weitere Möglichkeit, die Eigenschaft align-self auf ihren Standardwert zurückzusetzen. Mit diesem Selektor können alle Elemente ausgewählt werden, die bestimmte Kriterien nicht erfüllen. Mit dem Selektor :not() können wir alle Elemente auswählen, außer denen, auf die wir einen bestimmten align-self-Wert anwenden möchten.
Beispiel
In diesem Beispiel verwenden wir den Selektor :not(), um alle .item-Elemente auszuwählen, die keine .box1- oder .box3-Klasse haben, und setzen ihr align-self-Attribut auf auto. Dadurch wird sichergestellt, dass nur .box1- und .box3-Elemente über benutzerdefinierte align-self-Werte verfügen.
<!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>
Fazit
Die Eigenschaftalign-self ist ein leistungsstarkes Tool zum Festlegen der vertikalen Ausrichtung von Flex-Elementen innerhalb eines Flex-Containers. Manchmal müssen wir jedoch möglicherweise die Eigenschaft align-self in CSS auf ihren Standardwert zurücksetzen. Indem wir die Eigenschaft „align-self“ auf den Standardwert „auto“ zurücksetzen oder stattdessen „align-items“ verwenden, können wir das CSS vereinfachen und Ausrichtungsprobleme vermeiden.
Das obige ist der detaillierte Inhalt vonWie setze ich die Eigenschaft align-self in CSS auf ihren Standardwert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!