Flexbox „align-items': „flex-start' vs. „baseline' – Wann sollte ich welche verwenden?

Verstehen der Unterscheidung zwischen Flex-Start und Baseline

Bei der Nutzung von Flex--align-Eigenschaften ist die Unterscheidung zwischen Flex-Start und Baseline möglicherweise nicht möglich sofort erkennbar sein. Dies liegt daran, dass in vielen Situationen, in denen es um einheitliche Schriftgrößen oder äquivalente Inhalte geht, beide Werte offenbar die gleiche Ausrichtung ergeben. Es gibt jedoch entscheidende Unterschiede, die beim Umgang mit unterschiedlichen Inhaltsgrößen deutlich werden.

Flex-Start-Ausrichtung

Der Flex-Start-Wert richtet Flex-Elemente am Anfangsrand der Querachse innerhalb aus Der Flexcontainer. Diese Ausrichtung richtet normalerweise die linken Ränder von Flex-Elementen in horizontalen Layouts und die oberen Ränder in vertikalen Layouts aus.

Grundlinienausrichtung

Im Gegensatz dazu richtet der Grundlinienwert Flex-Elemente entsprechend der Grundlinie ihres Inhalts aus. Die Grundlinie bezieht sich auf die Linie, auf der sich die meisten Buchstaben und Zeichen befinden, wobei die Unterlängen darunter liegen. Flex-Artikel werden so positioniert, dass ihre Grundlinien ausgerichtet sind, wobei der Artikel mit dem größten Abstand zwischen seiner Grundlinie und der Queranfangsrandkante bündig an der Queranfangskante platziert wird.

Unterschiede in der Anwendung

Die Wahl zwischen Flex-Start und Grundlinienausrichtung hängt von der beabsichtigten Wirkung ab. Flex-Start eignet sich zum Ausrichten von Elementen mit einheitlichen Größen. Andererseits ist die Grundlinienausrichtung besonders nützlich, wenn Elemente mit unterschiedlichen Schriftgrößen verarbeitet werden, da sie sicherstellt, dass die Grundlinie für alle Elemente gleich ist.

Beispieldemonstration

Bedenken Sie den folgenden Codeausschnitt :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 300px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {
  font-size: 2em;
}
.item2 {
  font-size: 7em;
}
.item3 {
  font-size: 0.5em;
}
.item4 {
  font-size: 3em;
}
.item5 {
  font-size: 10em;
}

Wenn die Grundlinienausrichtung angewendet wird, werden die Flex-Elemente entlang ihrer jeweiligen Grundlinien ausgerichtet. Beachten Sie, wie die Ausrichtung gemäß der Spezifikation durch das höchste Element (Element 5) beeinflusst wird. Eine gestrichelte Linie stellt die Grundlinie aller Flex-Elemente dar.

Das obige ist der detaillierte Inhalt vonFlexbox „align-items': „flex-start' vs. „baseline' – Wann sollte ich welche verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!