nicht angemeldet
Matthias Scharwies
Matthias Scharwies
marctrix
Rolf B
marctrix
Gunnar Bittersmann
Rolf B
Servus!
Ich bin an einem Kurs für den Einstieg in Flexbox dran. Hier habe ich einige Fragen:
CSS/Tutorials/Flexbox/Grundlagen
Normalerweise / Im normalen Elementfluss (ist hier display:block; der Standardwert, der durch display:flex überschrieben wird?) nehmen Elemente wie p und section die volle Breite des Elternelements ein.
Durch display: flex wird das Elternelement zum flexiblen Container. Die Breite aller Kindelemente wird nun vom Browser berechnet.
Frage:
Welche Regel sorgt dafür, dass die oberen p-Elemente so klein sind, dass rechts noch Platz ist?
Warum verteilen sich die „größeren“ section-Elemente dann über die gesamte Breite?
Wie würdet ihr die verschiedenen Breiten erklären?
Herzliche Grüße
Matthias Scharwies
hallo
Frage:
Welche Regel sorgt dafür, dass die oberen p-Elemente so klein sind, dass rechts noch Platz ist?
Warum verteilen sich die „größeren“ section-Elemente dann über die gesamte Breite?
Wie würdet ihr die verschiedenen Breiten erklären?
Ich würde die vollständigigen Formen für flex: grow shrink size explizit verwenden.
Servus!
hallo
Frage:
Welche Regel sorgt dafür, dass die oberen p-Elemente so klein sind, dass rechts noch Platz ist?
Warum verteilen sich die „größeren“ section-Elemente dann über die gesamte Breite?
Wie würdet ihr die verschiedenen Breiten erklären?
Ich würde die vollständigigen Formen für flex: grow shrink size explizit verwenden.
Das kommt ja im 2. Kapitel. Im angesprochenen Kapitel 1 möchte ich den Effekt von display:flex erklären.
Herzliche Grüße
Matthias Scharwies
hallo
Das kommt ja im 2. Kapitel. Im angesprochenen Kapitel 1 möchte ich den Effekt von display:flex erklären.
Du musst in die Breitenberechnung die defaultwerte von flex berücksichtigen: flex: 0 1 auto;
Die Bedeutung von auto ist im endeffekt entweder content oder ein expliziter Wert, wenn es eine Breite für flex-items gibt.
Du kannst dir vorläufig die Erklärung vereinfachen, indem du keine breitenangaben für flex-items machst und darauf hinweist, dass per default die Breite so weit wie es der content zulässt, schrumpfen kann.
Servus!
hallo
Das kommt ja im 2. Kapitel. Im angesprochenen Kapitel 1 möchte ich den Effekt von display:flex erklären.
Du musst in die Breitenberechnung die defaultwerte von flex berücksichtigen: flex: 0 1 auto;
Gelten die Default-Werte denn auch, wenn die Eigenschaft nicht gesetzt ist?
Die Bedeutung von auto ist im endeffekt entweder content oder ein expliziter Wert, wenn es eine Breite für flex-items gibt.
Du kannst dir vorläufig die Erklärung vereinfachen, indem du keine breitenangaben für flex-items machst und darauf hinweist, dass per default die Breite so weit wie es der content zulässt, schrumpfen kann.
Und warum schrumpfen die 3 sections dann nicht so weit wie möglich?
Herzliche Grüße
Matthias Scharwies
hallo
Gelten die Default-Werte denn auch, wenn die Eigenschaft nicht gesetzt ist?
display:flex definiert doch automatisch, dass die Kinder des flex-containers flex-items sind.
Die Bedeutung von auto ist im endeffekt entweder content oder ein expliziter Wert, wenn es eine Breite für flex-items gibt.
Du kannst dir vorläufig die Erklärung vereinfachen, indem du keine breitenangaben für flex-items machst und darauf hinweist, dass per default die Breite so weit wie es der content zulässt, schrumpfen kann.
Und warum schrumpfen die 3 sections dann nicht so weit wie möglich?
Sie schrumpfen ja zwecks Anpassung an die Breite des flex-containers, wenn möglich, nicht auf ihr eigenes mögliches Minimum.
Hej Matthias,
Ich würde die vollständigigen Formen für flex: grow shrink size explizit verwenden.
Das kommt ja im 2. Kapitel. Im angesprochenen Kapitel 1 möchte ich den Effekt von display:flex erklären.
Dann nimm flex-grow ganz raus. - Sonst musst du es auch erklären. 😉
Marc
Hallo Matthias,
die p sind minimal weil sie kaum Inhalt enthalten. Die Größe ist per Default "gemäß Inhalt". Mit flex-grow:1 würden sie wachsen.
Die Section werden aus dem gleichen Grund nicht kleiner. Die Breite der 1. Box wird durch das Wort "Größenangaben" bestimmt, die 2. Box durch die Überschrift "Flexbox?" und die dritte durch das Wort "Mehrspaltenlayout".
Beachte bitte auch, wenn Du zu flex-grow und -shrink kommst, dass dieser Wert mit der Breite des Flexitems multipliziert wird, bevor die Flexbox ihre Kinder wachsen/schrumpfen lässt. Solange die Flexitems von Hause aus 100% Breite haben, ist das egal, aber gelegentlich hat man auch mal Layouts mit vorgegebenen Boxbreiten.
Rolf
Hej Matthias,
Ich bin an einem Kurs für den Einstieg in Flexbox dran. Hier habe ich einige Fragen:
CSS/Tutorials/Flexbox/Grundlagen
Normalerweise / Im normalen Elementfluss (ist hier
display:block;der Standardwert, der durchdisplay:flexüberschrieben wird?) nehmen Elemente wie p und section die volle Breite des Elternelements ein.Durch display: flex wird das Elternelement zum flexiblen Container. Die Breite aller Kindelemente wird nun vom Browser berechnet.
Frage:
- Welche Regel sorgt dafür, dass die oberen p-Elemente so klein sind, dass rechts noch Platz ist?
Bei mir ist da kein Platz (Safari, MacOS Mojave). Das ist so auch richtig, denn der gesamte verfügbare Platz wird ja gleichmäßig auf die vorhandenen Elemente aufgeteilt.
- *Warum verteilen sich die „größeren“ section-Elemente dann über die gesamte Breite?
Aus demselben Grund, warum sich die ps über die gesamte Breite verteilen. 😉
- Wie würdet ihr die verschiedenen Breiten erklären?
Schmeiß mal den Text aus den p-Elementen 😉
Was man gerne vergisst: es wird nur der verfügbare Platz entsprechend der flex-grow-Angabe verteilt. Du hast aber so viel Text in deinen Boxen, dass es keinen Platz mehr zum verteilen gibt.
Wenn du Kontrolle darüber haben willst, in welchem Verhältnis die Boxen aufgeteilte werden (in deinem Beispiel willst du für die Kinder des zweiten Containers wohl 1:2:1), dann musst du den Elementen eine Basis-Größe mitgeben. Ein Grund, warum ich immer gleich mit der Kurzschreibweise flex arbeite. Meist will ich so was nämlich kontrollieren.
Was du also machen müsstest ist, du schreibst statt flex-grow: 1 und flex-grow: 2 flex: 1 2 1em; und flex: 2 1 2em;
Das macht dann folgendes:
Tabellenkalk
Matthias Apselflex: 1 2 1em;Diese Box hat eine Basisgröße, die nur halb so groß ist, wie die andere Box, die doppelt so breit ist. Sie wächst auch nur halb so schnell, schrumpft aber doppelt so schnell, wie die andere, wodurch das Verhältnis 1:2 gewahrt bleibt.
Entsprechend gilt umgekehrt:
flex: 2 1 2em;Diese Box hat eine Basisgröße, die doppelt so groß ist, wie die andere Box, die daher halb so breit ist. Diese Box hier wächst auch doppelt so schnell, schrumpft aber nur halb so schnell, wie die andere, wodurch das Verhältnis 2:1 gewahrt bleibt.
😉
Marc
Hallo
Bei mir ist da kein Platz (Safari, MacOS Mojave).
Dann bist du beim falschen Beispiel oder der Safari verhält sich in diesem Beispiel anders als die meisten Browser und damit von Flexbox vorgesehen.
Gemeint sind die Zahlen von 1 bis 5. Die sollten im ersten Beispiel und einem Desktop-Bildschirm "linksbündig" stehen.
Gruss
MrMurphy
@@marctrix
Wenn du Kontrolle darüber haben willst, in welchem Verhältnis die Boxen aufgeteilte werden (in deinem Beispiel willst du für die Kinder des zweiten Containers wohl 1:2:1), dann musst du den Elementen eine Basis-Größe mitgeben.
Wenn du Kontrolle darüber haben willst, in welchem Verhältnis die Boxen aufgeteilt werden, dann solltest du überlegen, ob du wirklich Flexbox willst. Möglicherweise ist Grid dann das bessere Werkzeug.
LLAP 🖖
Hej Gunnar,
@@marctrix
Wenn du Kontrolle darüber haben willst, in welchem Verhältnis die Boxen aufgeteilte werden (in deinem Beispiel willst du für die Kinder des zweiten Containers wohl 1:2:1), dann musst du den Elementen eine Basis-Größe mitgeben.
Wenn du Kontrolle darüber haben willst, in welchem Verhältnis die Boxen aufgeteilt werden, dann solltest du überlegen, ob du wirklich Flexbox willst. Möglicherweise ist Grid dann das bessere Werkzeug.
Guter Hinweis (s.u.) - aber wir sind immer noch bei einem Artikel über flex 😉
Hier sollte erst mal wirklich klar gemacht werden, wie flex arbeitet und da ist das Entscheidende eben, dass der verfügbare Platz verteilt wird. Das heißt, wenn alle Elemente von Beginn an unterschiedlich groß sind (wegen flex-bass: auto), dann bleiben sie auch unterschiedlich groß, wenn der verfügbare Platz gleichmäßig auf alle flex-items verteilt wird.
Dann einen Hinweis (am besten mit Link) zu grid zu setzen, wie man echte Kontrolle auch in zwei Dimensionen über die Größe von Elementen bekommt, macht sicherlich Sinn.
Denn spätestens, wenn ich Dinge gleich groß haben will, die sich in unterschiedlichen Elternelementen befinden, versuche ich Dinge zu tun, für die flex-Boxen nicht gedacht sind. Wenn ich etwas an einem Grid ausrichten will, sollte ich CSS Grid nehmen. Klar! Und dann brauche ich in den meisten Fällen gar nicht erst unterschiedliche Elternelemente und wenn doch, dann verhalten die sich auch identisch, wenn die dieselben Grid-Anweisungen erhalten.
Marc
Hej @Matthias Scharwies,
Hier sollte erst mal wirklich klar gemacht werden, wie flex arbeitet und da ist das Entscheidende eben, dass der verfügbare Platz verteilt wird. Das heißt, wenn alle Elemente von Beginn an unterschiedlich groß sind (wegen
flex-bass: auto), dann bleiben sie auch unterschiedlich groß, wenn der verfügbare Platz gleichmäßig auf alle flex-items verteilt wird.
Ich würde auch einen Link hinzufügen zu How Big is this box von Rachel Andrew (auch wenn der Artikel auf englisch ist).
Der fasst alles wissenswerte zum Thema Dimensionen zusammen (nicht nur flex).
Marc
@@marctrix
Wenn du Kontrolle darüber haben willst, in welchem Verhältnis die Boxen aufgeteilt werden, dann solltest du überlegen, ob du wirklich Flexbox willst. Möglicherweise ist Grid dann das bessere Werkzeug.
Guter Hinweis (s.u.) - aber wir sind immer noch bei einem Artikel über flex 😉
Und da sollte drin stehen, wofür Flexbox gut ist – und wofür nicht.
LLAP 🖖
Hallo,
Und da sollte drin stehen, wofür Flexbox gut ist – und wofür nicht.
Kaffee kochen, Pfeile schnitzen, Auto tanken…
Wie lang soll der Artikel werden?
Gruß
Kalk
hallo
Hallo,
Und da sollte drin stehen, wofür Flexbox gut ist – und wofür nicht.
Kaffee kochen, Pfeile schnitzen, Auto tanken…
Inwiefern ist denn Flexbox für oben genanntes nicht gut?
Wenn ich nach echten Konflikten suche dürfte die Liste wohl eher kurz ausfallen.
Hallo
Viel spannender ist das dritte Beispiel: "Flexbox 3 - unterschiedliche Breiten".
Dort wird zu dem Beispiel behauptet: "Alle flexiblen Elemente erhalten nun eine Breite von flex-grow: 1. Das jeweils zweite Element wird über den nth-of-type-Selektor ausgewählt und erhält mit flex-grow: 2 die doppelte Breite. Die anderen Elemente werden entsprechend schmaler."
Im Beispiel trifft das für die Zahlenreihe mit bei der Zahl 2 auch zu.
Der zweite Text "Was kann Flexbox?" wird jedoch so schmal wie sein längstes Wort, in dem Beispiel "Flexbox?" in der Überschrift, welches durch die Schriftgröße am längsten ist.
Das Verhalten von Flexbox ist dabei mit dem CSS vollkommen korrekt, ich kann mir aber nicht vorstellen, das Flexbox-Anfänger das nachvollziehen können. Die werden eher ratlos zurückgelassen, zumal das Verhalten in dem Text genau anders beschrieben wird. Demnach sollte der Text "Was kann Flexbox?" doppelt so breit sein wie die beiden anderen Texte links und rechts davon.
Gruss
MrMurphy
Servus!
Danke für Euer Feedback! Ich werde am Wochenende dort weiterarbeiten.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
ich grübele nach Gunnars Hinweis gerade an den Begrifflichkeiten für die flex-direction. Der Normalfall in Westeuropa ist eine Schreibrichtung von links nach rechts und eine Blockrichtung von oben nach unten. Dazu habe ich die Glossareinträge Inlineachse und Blockachse angelegt, das sind Begriffe aus der CSS Spec "Writing Modes".
Es gibt einen Horizontal-Modus (horizontal-tb) und zwei Vertikalmodi (vertical-lr und vertical-rl). Im Horizontalmodus ist die Blockachse immer als "von oben nach unten" definiert, im Vertikalmodus kann ich es mit -lr oder -rl entscheiden, in welche Richtung die Blockachse zeigt.
Die Orientierung der Inline-Achse entstammt nicht dem writing-mode, sondern hängt vom dir-Attribut des Flex-Containers ab. Sie ist dir="ltr" von links nach rechts bzw. von oben nach unten, bzw. umgekehrt bei dir="rtl". (Ok, da kommen noch die CSS Eigenschaften direction und unicode-bidi hinzu, aber die sind laut Spec und MDN ein no-no für HTML Autoren).
Wie man das einem Flexbox-Einsteiger unter Vermeidung eines Schreikrampfes beibringt, da bin ich mir noch sehr unsicher. Das gehört vor allem eigentlich gar nicht zur Flexbox dazu, aber die Flexbox hängt davon ab.
Rolf
Servus!
Wie man das einem Flexbox-Einsteiger unter Vermeidung eines Schreikrampfes beibringt, da bin ich mir noch sehr unsicher. Das gehört vor allem eigentlich gar nicht zur Flexbox dazu, aber die Flexbox hängt davon ab.
Ich hatte den Fehler gemacht, einfach 4-5 Tutorials zu vergleichen. Ich wollte es anders, so wie den Grid-Kurs, anfangen.
Jetzt habe ich die Spec gelesen. Sie fängt bei den Grundlagen an und bleibt verständlich. Eine SVG-Grafik (sic) habe ich bereits übersetzt. Der Rest folgt.
Rolf
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
ok, ich habe jetzt die writing-mode Eigenschaft im Wiki dokumentiert (hier), incl. Redirect.
An der Flexbox-Achsen Seite will ich jetzt nichts ändern, ich weiß nicht ob Du dran rumbaust. Wenn nicht, würde ich dort bei den diversen justify- und align-Attributen flex-start/flex-end mit Hinweisen auf den writing-mode ergänzen.
Rolf
@@Rolf B
Im Horizontalmodus ist die Blockachse immer als "von oben nach unten" definiert
Nei-en!!
Ob die Blockachse vertikal oder horizontal ist, hängt einerseits von der Schreibrichtung (writing-mode) ab, andererseits natürlich auch von flex-direction.
LLAP 🖖
Hallo Gunnar,
Dooo-och!!!
Blockachse ≠ Querachse.
{ Inlineachse, Blockachse } ⊂ Writing Modes
{ Hauptachse, Querachse } ⊂ Flexbox-Modul
Richtung und Orientierung von Inline- und Blockachse legst Du (unter anderem) mit writing-mode und dir-Attribut fest.
Richtung und Orientierung von Haupt- und Querachse leitest Du mittels flex-direction aus Richtung und Orientierung von Inline- und Blockachse ab.
Wenn Du da schon durcheinander kommst… Ich auch, musste 3x editieren 😀
Rolf
@@Rolf B
Wenn Du da schon durcheinander kommst… Ich auch, musste 3x editieren 😀
Und ich hatte mich schon gefragt, warum du nicht gleich „Haupt-” und „Nebenachse“ sagst.
LLAP 🖖
Hallo Gunnar,
weil ich AB UND ZU auch mal weiß, was ich schreibe 😂
Rolf
Servus!
@@Rolf B
Wenn Du da schon durcheinander kommst… Ich auch, musste 3x editieren 😀
Und ich hatte mich schon gefragt, warum du nicht gleich „Haupt-” und „Nebenachse“ sagst.
@@Gunnar Bittersmann
Ich habe diese Grafik übersetzt: Datei:Flex-direction-terms.svg
Würdest Du Nebenachse oder Querachse verwenden?
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
Ich habe diese Grafik übersetzt: Datei:Flex-direction-terms.svg
Würdest Du Nebenachse oder Querachse verwenden?
Bei „Nebenachse“ hab ich wohl zu sehr an eine Ellipse gedacht. „Querachse“ passt schon
Aber „Hauptachse Beginn“ und „Beginn Querachse“ passt nicht zusammen. „Ende“ dito.
„Flex Element“[sic!] könnte missverständlich sein: das Element, für das display: flex gesetzt ist? Vielleicht besser „Flex-Item“? (Gibt’s im Deutschen ein passendes Wort für „Item“?)
Und nicht mit Deppenleerzeichen; auch „Flex-Container“ (oder „Flexbox“).
„Höhe“ und „Breite“ gilt für horizontale Schreibrichtung; im Original steht da main size und cross size.
LLAP 🖖
Hallo Gunnar Bittersmann,
Aber „Hauptachse Beginn“ und „Beginn Querachse“ passt nicht zusammen. „Ende“ dito.
Es sind die Stellen, an denen der flex-container die Achsen schneidet. Insofern würde ich das aus Sicht des Containers schon richtig im Sinne einer zulässigen Vereinfachung finden. Dass die Achsen keinen Anfang und auch kein Ende haben, ist eine andere Frage.
„Flex Element“[sic!] könnte missverständlich sein: das Element, für das
display: flexgesetzt ist? Vielleicht besser „Flex-Item“? (Gibt’s im Deutschen ein passendes Wort für „Item“?)
Ich würde auch von flex-container und flex-item sprechen.
„Höhe“ und „Breite“ gilt für horizontale Schreibrichtung; im Original steht da main size und cross size.
Ja, es sind die Abmessungen in Achsenrichtung.
Hauptabmessung und Querabmessung? 😉
Wir wären wieder beim Ausgangspunkt: Es ist schwierig zu übersetzen, vor allem in der vorliegenden Allgemeinheit.
Bis demnächst
Matthias
Servus!
„Flex Element“[sic!] könnte missverständlich sein: das Element, für das
display: flexgesetzt ist? Vielleicht besser „Flex-Item“? (Gibt’s im Deutschen ein passendes Wort für „Item“?)Ich würde auch von flex-container und flex-item sprechen.
Ok werd' ich so machen!
„Höhe“ und „Breite“ gilt für horizontale Schreibrichtung; im Original steht da main size und cross size.
Ja, es sind die Abmessungen in Achsenrichtung.
Hauptabmessung und Querabmessung? 😉
Eher "Abmessung Hauptachse" und Abmessung Querachse" oder mit Bindestrich wegen der leichten Sprache?
Wir wären wieder beim Ausgangspunkt: Es ist schwierig zu übersetzen, vor allem in der vorliegenden Allgemeinheit.
Genau!
Herzliche Grüße
Matthias Scharwies
Hallo Matthias Scharwies,
Ja, es sind die Abmessungen in Achsenrichtung.
Hauptabmessung und Querabmessung? 😉
Eher "Abmessung Hauptachse" und Abmessung Querachse" oder mit Bindestrich wegen der leichten Sprache?
Vielleicht besser Abschnitt?
Bis demnächst
Matthias
Hallo Matthias Apsel,
Vielleicht besser Abschnitt?
Noch vereinfachender könnte man auch von Längsbreite und Querbreite schreiben. Dann sollte man allerdings zwei Grafiken vorhalten, um der Frage zuvorzukommen, warum nicht Länge und Breite geschrieben wird.
Bis demnächst
Matthias
@@Matthias Apsel
Aber „Hauptachse Beginn“ und „Beginn Querachse“ passt nicht zusammen. „Ende“ dito.
Es sind die Stellen, an denen der flex-container die Achsen schneidet. Insofern würde ich das aus Sicht des Containers schon richtig im Sinne einer zulässigen Vereinfachung finden. Dass die Achsen keinen Anfang und auch kein Ende haben, ist eine andere Frage.
Die Frage war nach der Reihenfolge der Wörter.
LLAP 🖖
Hallo
Es handelt sich um die Längen der Achsen, nicht um Abmessungen, Höhen oder Breiten.
Gruss
MrMurphy
Hallo MrMurphy1,
Es handelt sich um die Längen der Achsen, nicht um Abmessungen, Höhen oder Breiten.
Nein, es handelt sich nach meinem Verständnis um die Teile der Achsen, die innerhalb des Flexcontainers liegen.
Bis demnächst
Matthias
Hallo
Nein, die Achsen befinden sich jeweils innerhalb des Flex-Containers und haben damit eine Länge.
Gruss
MrMurphy
Servus!
Hallo
Nein, die Achsen befinden sich jeweils innerhalb des Flex-Containers und haben damit eine Länge.
Und was ist mit flex-flow:row wrap? dann geht die Achse in der nächsten Zeile weiter, während der Cotainer begrenzt ist.
Gruss
MrMurphy
Herzliche Grüße
Matthias Scharwies
Hallo
Genau. Die Achse befindet sich weiterhin innerhalb des Flexcontainers und wird nur optisch in mehrere Zeilen unterteilt. Von der Funktion her handelt es sich aber um eine einzige Achse.
Innerhalb eines Flexcontainers gibt es genau eine main- und eine cross-axis. Die mehrzeilige Anzeige erfolgt ja nur für die User vor den Bildschirmen. Die Achsen bleiben praktisch jedoch gleichlang, als würden sie in einer Zeile stehen.
Gruss
MrMurphy
hallo
Hallo
Genau. Die Achse befindet sich weiterhin innerhalb des Flexcontainers und wird nur optisch in mehrere Zeilen unterteilt. Von der Funktion her handelt es sich aber um eine einzige Achse.
Innerhalb eines Flexcontainers gibt es genau eine main- und eine cross-axis. Die mehrzeilige Anzeige erfolgt ja nur für die User vor den Bildschirmen. Die Achsen bleiben praktisch jedoch gleichlang, als würden sie in einer Zeile stehen.
Mein Flex-Container kann bei aktivem wrap so aussehen:
d über die ganze Zeile
| a | b | c | | d
oder d über die ganze Spalte
| a | d | b | c
Wir haben 3 Achsen.
Hallo
Du hast Flexbox leider nicht verstanden. Es gibt zwei Achsen, main-axis und cross-axis. Wenn du dir eine dritte ausdenkst ist das dein persönliches Vergnügen, nur mit Flexbox hat das nichts zu tun.
Durch Wrap wird keine neue Achse eingeführt, sondern eine Achse geteilt angezeigt, wie es auch in vielen anderen Bereichen üblich ist, wenn die Anzeigebreite für eine komplette Darstellung nicht ausreicht.
Gruss
MrMurphy
hallo
Hallo
Du hast Flexbox leider nicht verstanden. Es gibt zwei Achsen, main-axis und cross-axis. Wenn du dir eine dritte ausdenkst ist das dein persönliches Vergnügen, nur mit Flexbox hat das nichts zu tun.
Durch Wrap wird keine neue Achse eingeführt, sondern eine Achse geteilt angezeigt, wie es auch in vielen anderen Bereichen üblich ist, wenn die Anzeigebreite für eine komplette Darstellung nicht ausreicht.
Es gibt eine Achse die ich durch align-content separat steuern kann.
Hej MrMurphy1,
Innerhalb eines Flexcontainers gibt es genau eine main- und eine cross-axis.
Würde ich als hauptachse und kreuzende Achse übersetzen und bei der ersten Erwähnung hinzufügen, dass die im rechten Winkel zueinander stehen.
Marc
