baseline-source

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die baseline-source CSS Eigenschaft definiert, welche Basislinie verwendet werden soll, wenn Inline-Elemente mehrere mögliche Basislinien haben, wie z.B. mehrzeilige Inline-Blöcke oder inline Flex-Container. Die Werte erlauben die Wahl zwischen der Ausrichtung zur ersten Basislinie des Elements, der letzten Basislinie oder dem automatischen Entscheiden des Browsers basierend auf dem Typ des Elements.

Syntax

css

/* 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: Spezifiziert die Ausrichtung zur letzten Basislinie für Inline-Blöcke, und zur ersten Basislinie für alles andere.
first: Spezifiziert die Ausrichtung zur ersten Basislinie.
last: Spezifiziert die Ausrichtung zur letzten Basislinie.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

baseline-source = 
  auto   |
  first  |
  last

Beispiele

Auswahl der Basislinie in Inline-Flex-Containern

Dieses Beispiel demonstriert die Nutzung der baseline-source Eigenschaft, um die Ausrichtung der Basislinie von Inline-Flex-Containern zu steuern.

HTML

Unser HTML enthält mehrere <span>-Elemente, die generische Inline-Container für phrasierende Inhalte sind. Drei der <span>-Elemente enthalten verschachtelte <span>-Kinder.

html

<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

body {
  font-family: sans-serif;
}

.box {
  border: 2px solid #888;
  width: 50px;
}

span {
  padding: 0.4rem;
}

Wir definieren alle Boxen als Inline-Flex-Container. Wir setzen die .first-Box, um die erste Basislinie zu verwenden, die .auto-Box nutzt die Standard-Basislinie (die für Inline-Flex-Container first ist), und die .last-Box verwendet die letzte Basislinie.

css

.box {
  display: inline-flex;
  flex-direction: column;
}

.first {
  baseline-source: first;
}

.auto {
  baseline-source: auto;
}

.last {
  baseline-source: last;
}

Ergebnis

Spezifikationen

Specification
CSS Inline Layout Module Level 3 # baseline-source

Browser-Kompatibilität

Siehe auch

vertical-align Eigenschaft
Überblick der CSS-Box-Ausrichtung

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden