baseline-source CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die baseline-source CSS Eigenschaft definiert, welche Grundlinie verwendet werden soll, wenn Inline-Level-Boxen mehrere mögliche Grundlinien haben, wie z. B. mehrzeilige Inline-Blöcke oder Inline-Flex-Container.
Die Werte ermöglichen die Auswahl zwischen der Ausrichtung an der ersten Grundlinie der Box, der letzten Grundlinie oder dem automatischen Bestimmen durch den Browser basierend auf dem Typ der Box.
Syntax
/* Keyword values */
baseline-source: auto;
baseline-source: first;
baseline-source: last;
/* Global values */
baseline-source: inherit;
baseline-source: initial;
baseline-source: revert;
baseline-source: revert-layer;
baseline-source: unset;
Werte
auto-
Gibt die Ausrichtung an der
letzten Grundliniefür Inline-Block an und dieerste Grundliniefür alles andere. first-
Gibt die Ausrichtung an der
ersten Grundliniean. last-
Gibt die Ausrichtung an der
letzten Grundliniean.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | inline-level boxes |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
baseline-source =
auto |
first |
last
Beispiele
Grundlinienselektion in Inline-Flex-Containern
Dieses Beispiel demonstriert die Verwendung der baseline-source Eigenschaft zur Steuerung der Grundlinienausrichtung von Inline-Flex-Containern.
HTML
Unser HTML umfasst mehrere <span>-Elemente, die generische Inline-Container für Inhalte in Phrasen sind.
Drei der <span>-Elemente enthalten eingebettete <span>-Kinder.
<span>Baseline ___</span>
<span class="box first">
<span>First</span>
<span>A</span>
<span>B</span>
<span>C</span>
</span>
<span class="box auto">
<span>Auto</span>
<span>A</span>
<span>B</span>
<span>C</span>
</span>
<span class="box last">
<span>A</span>
<span>B</span>
<span>C</span>
<span>Last</span>
</span>
CSS
Wir definieren alle Boxen als Inline-Flex-Container.
Wir setzen die .first-Box, um die erste Grundlinie zu verwenden, die .auto-Box verwendet die Standardgrundlinie (die bei Inline-Flex-Containern first ist), und die .last-Box verwendet die letzte Grundlinie.
.box {
display: inline-flex;
flex-direction: column;
}
.first {
baseline-source: first;
}
.auto {
baseline-source: auto;
}
.last {
baseline-source: last;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Inline Layout Module Level 3 # baseline-source |
Browser-Kompatibilität
Siehe auch
vertical-alignEigenschaft- Überblick über die CSS-Box-Ausrichtung