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-Eigenschaft CSS 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 der automatischen Entscheidung durch den Browser basierend auf dem Boxtyp.

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: Gibt die Ausrichtung an der letzten Grundlinie für Inline-Block, die Ausrichtung an der ersten Grundlinie für alles andere an.
first: Gibt die Ausrichtung an der ersten Grundlinie an.
last: Gibt die Ausrichtung an der letzten Grundlinie an.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

baseline-source = 
  auto   |
  first  |
  last

Beispiele

Auswahl der Grundlinie in Inline-Flex-Containern

Dieses Beispiel demonstriert die Verwendung der baseline-source-Eigenschaft zur Steuerung der Grundlinienausrichtung von Inline-Flex-Containern.

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 #888888;
  width: 50px;
}

span {
  padding: 0.4rem;
}

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 für Inline-Flex-Container first ist), und die .last-Box verwendet die letzte Grundlinie.

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-Ausrichtungsü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