Verhindern Sie, dass sich flexible Gegenstände dehnen

Lesezeit: 3 Minuten

Probe:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

Ich habe bitte zwei Fragen:

  1. Warum passiert es im Grunde dem span?
  2. Was ist der richtige Ansatz, um zu verhindern, dass es sich ausdehnt, ohne andere Flex-Elemente in einem Flex-Container zu beeinträchtigen?

Verhindern Sie dass sich flexible Gegenstande dehnen
Sebastian Brosch

Sie wollen die Spannweite nicht in die Höhe strecken?
Sie haben die Möglichkeit, ein oder mehrere Flex-Elemente so zu beeinflussen, dass sie nicht die volle Höhe des Containers ausdehnen.

Um alle Flex-Items des Containers zu beeinflussen, wählen Sie Folgendes:

Du musst einstellen align-items: flex-start; zu div und alle Flex-Items dieses Containers erhalten die Höhe ihres Inhalts.

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>

Um nur ein einzelnes Flex-Element zu beeinflussen, wählen Sie Folgendes:

Wenn Sie ein einzelnes Flex-Element auf dem Container dehnen möchten, müssen Sie festlegen align-self: flex-start; zu diesem Flex-Artikel. Alle anderen Flex-Items des Containers sind nicht betroffen.

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}
<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

Warum passiert das mit der span?

Der Standardwert der Eigenschaft align-items ist stretch. Dies ist der Grund, warum die span Füllen Sie die Höhe der div.

Unterschied zwischen baseline und flex-start?

Wenn Sie Text auf den Flex-Elementen mit unterschiedlichen Schriftgrößen haben, können Sie die Grundlinie der ersten Zeile verwenden, um das Flex-Element vertikal zu platzieren. Ein Flex-Element mit einer kleineren Schriftgröße hat oben etwas Platz zwischen dem Container und sich selbst. Mit flex-start Das Flex-Item wird an die Spitze des Containers gesetzt (ohne Leerzeichen).

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}
<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

Hier finden Sie weitere Informationen zum Unterschied zwischen baseline und flex-start Hier:
Was ist der Unterschied zwischen Flex-Start und Baseline?

  • Danke für die Antwort, aber es betrifft alle Flex-Items. Und eine Frage: Was ist der Unterschied zwischen baseline und flex-start Werte? Ihre Ergebnisse scheinen die gleichen zu sein. Können sie in einer Situation anders sein?

    – Mori

    24. November 15 um 6:54 Uhr


  • Scheint großartig! Ich wäre Ihnen dankbar, wenn Sie mir den Unterschied erklären würden baseline und flex-start Werte auch.

    – Mori

    24. November 15 um 7:05 Uhr

  • Was ist der Unterschied zwischen baseline und flex-start?

    – Michael Benjamin

    11. August 18 um 12:27 Uhr


  • Tipp: Wenn Sie sie horizontal ausrichten möchten, verwenden Sie einfach align-items: center; 🙂

    – Ricardo Zea

    4. Februar 20 um 3:55 Uhr

  • #Hack : Wickeln Sie Ihr Element mit einem neuen div ein. Dadurch wird das neue übergeordnete Div gestreckt und Ihr Element unberührt gelassen.

    – Benutzer1948585

    22. April 2020 um 4:53 Uhr

Verhindern Sie dass sich flexible Gegenstande dehnen
Mori

Sebastian Brosch hat bereits eine tolle Antwort gegeben. Hier ist ein alternativer Ansatz:
margin-bottom: auto

div {
  display: flex;
  height: 200px;
  background: tan;
}

span {
  background: red;
  margin-bottom: auto;
}
<div>
  <span>This is some text.</span>
</div>

.

785050cookie-checkVerhindern Sie, dass sich flexible Gegenstände dehnen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy