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 Baseline verwendet werden soll, wenn Inline-Level-Boxen mehrere mögliche Baselines haben, wie z. B. mehrzeilige Inline-Blöcke oder Inline-Flex-Container. Die Werte erlauben es, zwischen der Ausrichtung zur ersten Baseline der Box, der letzten Baseline oder einer automatischen Entscheidung des Browsers basierend auf dem Boxtyp zu wählen.

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 letzte Baseline Ausrichtung für inline-block, erste Baseline Ausrichtung für alle anderen.
first: Spezifiziert erste Baseline Ausrichtung.
last: Spezifiziert letzte Baseline Ausrichtung.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

baseline-source = 
  auto   |
  first  |
  last

Beispiele

Auswahl der Baseline in Inline-Flex-Containern

Dieses Beispiel zeigt die Verwendung der baseline-source Eigenschaft zur Steuerung der Baseline-Ausrichtung von Inline-Flex-Containern.

HTML

Unser HTML enthält mehrere <span> Elemente, die generische Inline-Container für phrasierte 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 Baseline zu verwenden, die .auto Box verwendet die Standard-Baseline (die für Inline-Flex-Container first ist) und die .last Box verwendet die letzte Baseline.

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
CSS Box-Ausrichtung Übersicht

Help improve MDN

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

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