Wenn Justify-Content: Stretch das gleich ist wie mit dem Justify-In-Inhalt: Flex-Start/Start, warum brauchen wir REYIFY- ⇐ HTML

[Guest]

Ich habe nach einem Vorschlag gesucht, dass wir mit Justify-Content: Flex-Start/Start beginnen sollen, anstatt auf lange Sicht Justify-Content: Stretch zu verwenden. Wenn wir die Rechtfertigung in Verbindung stellen: Stretch. Und was sind alle Orte, an denen wir Justify-Incontent benötigen: Stretch ?
Siehe das folgende Beispiel des letzten Fehler p> Ich habe den Fehler in der aktuellen Chromversion 133.0.0.0 in Bezug auf CS reproduziert. Die Rechtfertigungsbekämpfung: Stretch streckte die Container aus, um den verfügbaren Platz zu füllen. Laut MDN-Dokumenten-Flex-Grow Die Eigenschaft steuert jedoch die Dehnung des Flex-Elements. -Content: Flex-Start funktioniert. Die zweite Klasse Flex-Stretch-Example beginnt sich zu dehnen, um den Container zu füllen, aber in vor den Versionen funktioniert es wie Flex-Start .
Ich habe mich immer darauf gefreut, dass immer Verwenden von Justify-Content: Flex-Start/Start; wäre immer Lösung oder wir müssen warten, bis der Fehler behoben wird? >

Code: Select all

.flex-start-example > ul {
display: flex;
justify-content: flex-start;
gap: 25px;
}

.flex-stretch-example > ul {
display: flex;
justify-content: stretch;
gap: 25px;
}

< /code>
Stellen Sie sicher, dass Sie den folgenden Fehler in der Chrome 133.0.0.0-Browser-Version anzeigen. src = "https://i.sstatic.net/tmrwqcqj.png"/> 


.flex-start-example,
.flex-stretch-example {
outline-style: solid;
padding: 5px;
margin: 25px;
}

ul {
list-style: none;
}

li {
outline-style: solid;
padding: 5px;
}

.flex-start-example>ul {
display: flex;
justify-content: flex-start;
gap: 25px;
}

.flex-stretch-example>ul {
display: flex;
justify-content: stretch;
gap: 25px;
}< /code>





Document




 Flex-start Example: 

[list]
[*]Item 1
[*]Item 2
[*]Item 3
[/list]

 Stretch Example: 

[list]
[*]Item 1
[*]Item 2
[*]Item 3
[/list]