`column-rule-inset-junction-end` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Mit der CSS-Eigenschaft column-rule-inset-junction-end können die unteren Endpunkte von column-rule-Segmenten versetzt werden, wenn es sich dabei um Verbindungspunkte handelt, also um Endpunkte an Schnittstellen von Abständen, an denen sich rule-Segmente kreuzen.

Probieren Sie es aus

column-rule-inset-junction-end: 0;

column-rule-inset-junction-end: 0.5em;

column-rule-inset-junction-end: 10px;

column-rule-inset-junction-end: -100%;

column-rule-inset-junction-end: overlap-join;

<section id="default-example">
  <div id="example-element">
    <i>A</i>
    <i>B</i>
    <i>C</i>
    <i>D</i>
    <i>E</i>
    <i>F</i>
    <i>G</i>
    <i>H</i>
    <i>I</i>
    <i>J</i>
    <i>K</i>
    <i>L</i>
  </div>
</section>

#example-element {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  rule: solid thick lightpink;
  column-rule-color: magenta;
  column-rule-break: intersection;
  gap: 1.5em;
  rule-overlap: column-over-row;
  border: 1px solid rebeccapurple;
  margin: auto;
  rule-visibility-items: around;
}
#example-element i {
  background-color: #efefef;
  color: #333333;
  padding: 1em;
}

Syntax

css

/* Keywords */
column-rule-inset-junction-end: overlap-join;

/* <length-percentage> values */
column-rule-inset-junction-end: 0;
column-rule-inset-junction-end: 1em;
column-rule-inset-junction-end: -5px;
column-rule-inset-junction-end: -25%;

/* Global values */
column-rule-inset-junction-end: inherit;
column-rule-inset-junction-end: initial;
column-rule-inset-junction-end: revert;
column-rule-inset-junction-end: revert-layer;
column-rule-inset-junction-end: unset;

Werte

Für diese Eigenschaft wird ein einzelner Wert aus der folgenden Liste angegeben:

overlap-join: Legt fest, dass sich das Segment an der Schnittstelle über die row-rule erstrecken soll. Der Wert entspricht der Hälfte von row-gap plus der Hälfte des verwendeten Werts von row-rule-width.
<length-percentage>: Legt die Größe des Versatzes fest. Prozentwerte beziehen sich auf den Endpunkt an der Schnittstelle, dessen Bezugsgröße der Wert von row-gap ist.

Beschreibung

Mit der Eigenschaft column-rule-inset-junction-end können Segmentendpunkte an Schnittstellen am unteren Ende von column-rule-Segmenten nach innen oder außen versetzt werden. Der Standardwert ist 0. Positive Werte verkürzen das Segment, während negative Werte und das Schlüsselwort overlap-join es verlängern.

Column-rules werden innerhalb eines Spaltenabstands als ein oder mehrere Segmente gezeichnet. Diese Segmente liegen zwischen:

Benachbarten Spalten in CSS-Grid-Layouts.
Benachbarten Flex-Elementen oder Flex-Zeilen in Flex-Layouts, abhängig von flex-direction.
Benachbarten Spalten in mehrspaltigen Layouts.

Ob sich eine column-rule über mehrere Zeilen erstreckt oder in mehrere Segmente unterteilt wird, legt die Eigenschaft column-rule-break fest. Innere Unterbrechungen zwischen column-rule-Segmenten haben die Größe von row-gap. Ein Endpunkt an einer Schnittstelle befindet sich am unteren Ende jedes Spaltensegments, dessen unteres Ende an einer Schnittstelle von Abständen liegt, an der weitere Spalten- oder rule-Segmente vorhanden sind.

Die Eigenschaft column-rule-inset-junction-end ist Bestandteil mehrerer Kurzschreibweisen:

Um die oberen und unteren Endpunkte von Spaltensegmenten an Schnittstellen nach innen zu versetzen, können die Eigenschaften column-rule-inset-junction-end und column-rule-inset-junction-start mit der Kurzschreibweise column-rule-inset-junction festgelegt werden.
Um alle unteren Endpunkte von Spaltensegmenten nach innen zu versetzen, können die Eigenschaften column-rule-inset-junction-end und column-rule-inset-cap-end mit der Kurzschreibweise column-rule-inset-end festgelegt werden.
Um die oberen, unteren, linken und rechten Segmentendpunkte an Schnittstellen nach innen zu versetzen, können die Kurzschreibweisen column-rule-inset-junction und row-rule-inset-junction mit der Kurzschreibweise rule-inset-junction festgelegt werden.

Alle Segmentendpunkte, einschließlich der Entsprechungen dieser Eigenschaft mit -start, -cap und row-, können mit der Kurzschreibweise rule-inset festgelegt werden.

Endpunkte an Schnittstellen verstehen

Ein Segmentendpunkt an einer Schnittstelle ist ein Segmentendpunkt an einem inneren Abstand, der an einer Schnittstelle von Abständen endet, an der weitere rule- oder Spaltensegmente vorhanden sind. Die Eigenschaft column-rule-inset-junction-end steuert den Versatz der unteren Kante von Spaltensegmenten an Schnittstellen. Dadurch können die Segmente verkürzt oder verlängert werden.

Längenwerte für column-rule-inset-junction-end versetzen Segmente um den angegebenen Wert nach innen. Negative Längenwerte bewirken einen Versatz nach außen und verlängern das untere Ende des Segments an der Schnittstelle. Prozentwerte beziehen sich auf die Größe von row-gap. Mit -50% wird das untere Ende des Segments an der Schnittstelle bis zur Mitte des darunterliegenden Zeilenabstands verlängert, unabhängig davon, wie breit dieser Abstand ist.

In der folgenden Demonstration enden die column-rule-Segmente in den oberen beiden Zeilen an Schnittstellen. Bei column-rule-inset-junction-end: 16px werden die unteren Enden dieser Segmente um 16px nach innen versetzt. Ändern Sie den <length>-Wert für den Versatz, um besser zu erkennen, welche Segmente an Schnittstellen enden.

<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>15</li>
  <li>16</li>
</ul>

<p>
  <label>
    <code>rule-visibility-items</code> value
    <select id="visibility">
      <option>all</option>
      <option>between</option>
      <option>around</option>
      <option selected>normal</option>
    </select>
  </label>
</p>

<p>
  <label
    >Change the size of the inset.
    <input type="range" min="-40" max="16" value="16" id="inset" data-unit="px"
  /></label>
  <output id="o">16px</output>
</p>

<p>
  <label
    >Change the size of the inset.
    <input
      type="range"
      min="-450"
      max="100"
      value="100"
      id="inset"
      data-unit="%"
  /></label>
  <output id="o">100%</output>
</p>

ul {
  display: grid;
  grid-template-columns: repeat(6, auto);
  list-style-type: none;
  gap: 20px;
  column-rule: 10px solid olive;
  row-rule: 10px solid palegoldenrod;
  rule-overlap: column-over-row;
  rule-visibility-items: normal;
  rule-break: intersection;
  column-rule-inset-junction-end: 16px;

  border: 1px solid;
}
ul {
  place-items: center;
  width: 95vw;
  padding: 0;
}
li {
  text-align: center;
  font-family: sans-serif;
  background-color: #ededed;
  padding: 1em;
  width: 100%;
  box-sizing: border-box;
}
@layer no-support {
  @supports not (column-rule-inset-junction-end: 16px) {
    body::before {
      content: "Your browser doesn't support the column-rule-inset-junction-end property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

ul {
  column-rule-inset-junction-end: 100%;
  column-rule-style: inset;
}

const inset = document.getElementById("inset");
const visibility = document.getElementById("visibility");
const ul = document.getElementById("ul");
const output = document.getElementById("o");

inset.addEventListener("input", () => {
  o.innerText =
    ul.style.columnRuleInsetJunctionEnd = `${inset.value}${inset.dataset["unit"]}`;
});

visibility.addEventListener("change", () => {
  ul.style.ruleVisibilityItems = `${visibility.value}`;
  if (visibility.value === "between") {
    ul.style.columnRuleStyle = "repeat(3, solid), repeat(2, double)";
  } else if (visibility.value === "around") {
    ul.style.columnRuleStyle = "repeat(3, solid), repeat(2, double)";
  } else {
    ul.style.columnRuleStyle = "solid";
  }
});

visibility.addEventListener("change", () => {
  ul.style.ruleVisibilityItems = `${visibility.value}`;
  if (visibility.value === "between") {
    ul.style.columnRuleStyle = "repeat(2, inset), double, repeat(2, solid)";
  } else if (visibility.value === "around") {
    ul.style.columnRuleStyle = "repeat(3, inset), repeat(2, double)";
  } else {
    ul.style.columnRuleStyle = "solid";
  }
});

Wenn Sie 0px als Wert festlegen, schließen die Enden der column-rules bündig mit den Zeilenenden ab und grenzen an den Zeilenabstand. Dies ist die Standardeinstellung. Beachten Sie, dass sich bei einer Änderung des Eigenschaftswerts nur die unteren Enden der Segmente in der Mitte des Grids ändern. Die Segmente in der untersten Zeile ändern sich nicht: Ihre Enden sind Abschlussendpunkte und werden von der Eigenschaft column-rule-inset-junction-end nicht beeinflusst.

Wählen Sie around als Wert für rule-visibility-items. Bei diesem Wert werden rules in einem Abstandssegment gezeichnet, wenn ein Element mindestens einen der beiden angrenzenden Bereiche belegt. Die column-rule-Segmente mit doppeltem Linienstil, die bei rule-visibility-items: around erscheinen, enden an einer inneren Schnittstelle, an der ein oder mehrere row-rule-Segmente vorhanden sind. Diese Spaltensegmente haben Endpunkte an Schnittstellen.

Wählen Sie between als Wert für rule-visibility-items. Bei diesem Wert werden rules in Abstandssegmenten nur gezeichnet, wenn Elemente beide angrenzenden Bereiche belegen. Die column-rule-Segmente mit doppeltem Linienstil enden nun an einer inneren Schnittstelle, an der keine weiteren rule-Segmente vorhanden sind. Ihre Enden sind daher Abschlussendpunkte und werden von der Eigenschaft column-rule-inset-junction-end nicht beeinflusst.

Der Wert `overlap-join`

Der Wert overlap-join verlängert das untere Ende innerer Segmente, sodass es mit der unteren Kante der kreuzenden row-rule abschließt. Der Wert entspricht der Hälfte der Größe von row-gap (wodurch das Segment bis zur Mitte des Abstands reicht) plus der Hälfte der Breite der row-rule.

Wenn column-rule-inset-junction-end auf das Schlüsselwort overlap-join gesetzt ist, reichen die Segmentenden an Schnittstellen in den Zeilenabstand hinein, bis sie die untere Kante der dort gezeichneten row-rule erreichen und sich mit ihr verbinden.

Im folgenden interaktiven Beispiel ist column-rule-inset-junction-end auf overlap-join gesetzt:

<p>
  <label
    >Change the <code>row-gap</code>.
    <input type="range" min="10" max="40" value="30" id="gap" data-unit="px"
  /></label>
  <output id="og">30px</output>
</p>
<p>
  <label
    >Change the <code>row-rule-width</code>.
    <input type="range" min="0" max="40" value="16" id="rrw" data-unit="px"
  /></label>
  <output id="ow">16px</output>
</p>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

ul {
  display: grid;
  grid-template-columns: repeat(4, auto);
  list-style-type: none;
  gap: 30px;
  column-rule: 16px solid olive;
  row-rule: 10px solid palegoldenrod;
  rule-overlap: column-over-row;
  rule-visibility-items: around;
  column-rule-break: intersection;
  column-rule-inset-junction-end: overlap-join;
  border: 1px solid;
}
ul {
  place-items: center;
  width: 70vw;
  margin: auto;
  padding: 0;
}
li {
  text-align: center;
  font-family: sans-serif;
  background-color: #ededed;
  padding: 2em;
  width: 100%;
  box-sizing: border-box;
}
@layer no-support {
  @supports not (column-rule-inset-junction-end: 16px) {
    body::before {
      content: "Your browser doesn't support the column-rule-inset-junction-end property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const ul = document.querySelector("ul");
const gapSize = document.getElementById("gap");
const og = document.getElementById("og");
const ruleWidth = document.getElementById("rrw");
const ow = document.getElementById("ow");

gapSize.addEventListener("input", () => {
  og.innerText = ul.style.rowGap = `${gapSize.value}px`;
});

ruleWidth.addEventListener("input", () => {
  ow.innerText = ul.style.rowRuleWidth = `${ruleWidth.value}px`;
});

Ändern Sie die Werte von row-rule-width und row-gap. Beachten Sie, dass das untere Ende des Spaltensegments unabhängig von der Größe des Abstands oder der row-rule stets so weit verlängert wird, dass es mit der unteren Kante der im Abstand gezeichneten row-rule abschließt.

Formale Definition

Wert in der Datenbank nicht gefunden!

Formale Syntax

column-rule-inset-junction-end = 
  <inset-value>  

<inset-value> = 
  <length-percentage>  |
  overlap-join         

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie Sie mit column-rule-inset-junction-end die Endkanten von Spaltensegmenten an Schnittstellen in Flex-Containern nach innen versetzen.

HTML

Das Markup enthält zwei <div>-Elemente mit jeweils sieben Kindelementen. Der einzige Unterschied zwischen den beiden Containern besteht darin, dass der zweite zusätzlich die Klasse column hat.

html

<h1>Insetting junction column rule endpoints</h1>
<article>
  <section>
    <h2>flex-direction: row</h2>
    <div class="flexbox">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
  <section>
    <h2>flex-direction: column</h2>
    <div class="flexbox column">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
</article>

<p>
  <label
    >Change the size of the inset.
    <input type="range" min="-40" max="16" value="16" id="inset"
  /></label>
  <output id="o">16px</output>
</p>

CSS

Mit der Eigenschaft display machen wir die .flexbox-Elemente zu Flex-Containern. Mithilfe von flex-wrap und flex-line-count verteilen wir die Elemente auf drei Flex-Zeilen. Wir definieren eine hellblaue rule, die sowohl in Zeilen- als auch in Spaltenabständen gezeichnet wird. Anschließend überschreiben wir column-rule-color, um die Spaltenabstände mit einem dunkleren blue zu gestalten. Außerdem setzen wir die Eigenschaft rule-overlap auf column-over-row, damit Spaltensegmente bei Überlappungen über den Zeilensegmenten gezeichnet werden. Schließlich setzen wir column-rule-inset-junction-end auf 16px.

css

.flexbox {
  display: flex;
  flex-wrap: balance;
  flex-line-count: 3;
  gap: 20px;
  rule: 5px solid lightblue;
  column-rule-color: blue;
  rule-overlap: column-over-row;

  column-rule-inset-junction-end: 16px;
}

Außerdem setzen wir flex-direction für den Container .column auf column. Dadurch verläuft die Hauptachse des Flex-Containers vertikal, und die Elemente werden in Spalten statt in Zeilen angeordnet.

css

.column {
  flex-direction: column;
}

Das übrige CSS ist der Kürze halber ausgeblendet.

h1,
article {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  font-size: 1.25em;
}
h2 {
  font-size: 1em;
}
article {
  display: flex;
  gap: 5vw;
  rule: 1px solid black;
  width: 100vw;
}
section {
  flex-basis: 45vw;
}
.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  height: 30px;
}
output {
  display: inline-block;
  width: 2em;
}
p {
  margin-top: 2.5em;
}
@layer no-support {
  @supports not (column-rule-inset-junction-end: 16px) {
    body::before {
      content: "Your browser doesn't support the column-rule-inset-junction-end property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

const inset = document.getElementById("inset");
const containers = document.querySelectorAll(".flexbox");
const output = document.getElementById("o");

inset.addEventListener("input", () => {
  const val = `${inset.value}px`;
  containers[0].style.columnRuleInsetJunctionEnd = val;
  containers[1].style.columnRuleInsetJunctionEnd = val;
  output.innerText = val;
});

Ergebnis

Ändern Sie die Größe des Versatzes. Beachten Sie, dass diese Eigenschaft nur column-rules beeinflusst, die in mehrere Segmente unterteilt sind. Besteht eine column-rule aus einem einzigen Segment, das sich über die Höhe des Containers erstreckt, hat dieses Segment zwei Abschlussendpunkte und keine Endpunkte an Schnittstellen. Änderungen am Wert von column-rule-inset-junction-end wirken sich dann nicht darauf aus.

Spezifikationen

Spezifikation
CSS Gaps Module Level 1 # propdef-column-rule-inset-junction-end

Browser-Kompatibilität

Siehe auch

column-rule-inset-junction-start
Kurzschreibweise column-rule-inset-junction
Kurzschreibweise column-rule-inset
Kurzschreibweise rule-inset
column-rule-break
Kurzschreibweise rule-break
rule-overlap
rule-visibility-items
Kurzschreibweise rule
Modul CSS gaps

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

column-rule-inset-junction-end CSS property

HTML

CSS

Ergebnis

Help improve MDN

`column-rule-inset-junction-end` CSS property