Beispiel:Flexbox-8.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Flexbox 8 – align-self</title>
<style> .flex-container {
display: flex; gap: 1em; height: 16em; padding: 1em; border: thin dotted; align-items: center;
}
.flex-item {
flex: 1; padding: 1em; border: medium solid steelblue; background: aliceblue;
}
.special {
align-self: flex-start; border-color: firebrick;
}
.controls {
margin: 1em 0;
}
.controls label {
display: block; margin-bottom: 0.25rem;
}
/* Demonstration mit :has() */
body:has(input[value="start"]:checked) .special {
align-self: flex-start;
}
body:has(input[value="center"]:checked) .special {
align-self: center;
}
body:has(input[value="end"]:checked) .special {
align-self: flex-end;
}
body:has(input[value="stretch"]:checked) .special {
align-self: stretch;
} </style> </head>
<body>
Inhaltsverzeichnis
Flexbox 8 – align-self
Der Flex-Container verwendet
align-items: center.
Das mittlere Element kann mit
align-self
abweichend ausgerichtet werden.
<label><input type="radio" name="as" value="start" checked> flex-start</label> <label><input type="radio" name="as" value="center"> center</label> <label><input type="radio" name="as" value="end"> flex-end</label> <label><input type="radio" name="as" value="stretch"> stretch</label>
<section class="flex-item">
Flexbox
Dieses Element wird durch
align-items: center
vertikal zentriert.
</section>
<section class="flex-item special">
align-self
Dieses Flex-Item ignoriert die gemeinsame
Ausrichtung und verwendet seinen eigenen
Wert für align-self.
</section>
<section class="flex-item">
Flex-Item
Auch dieses Element wird durch
align-items: center
ausgerichtet.
</section>
</body> </html>
