Matthias Scharwies: display:flex - der Standardwert und andere Begrifflichkeiten

problematische Seite

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

--
"Survive or die trying!"
  1. problematische Seite

    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.

    1. problematische Seite

      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

      --
      "Survive or die trying!"
      1. problematische Seite

        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.

        1. problematische Seite

          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

          --
          "Survive or die trying!"
          1. problematische Seite

            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.

      2. problematische Seite

        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

  2. problematische Seite

    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

    --
    sumpsi - posui - clusi
  3. problematische Seite

    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 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?

    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:

    flex: 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

    1. problematische Seite

      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

    2. problematische Seite

      @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. problematische Seite

        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

        1. problematische Seite

          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

        2. problematische Seite

          @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. problematische Seite

            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

            1. problematische Seite

              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.

  4. problematische Seite

    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

    1. problematische Seite

      Servus!

      Danke für Euer Feedback! Ich werde am Wochenende dort weiterarbeiten.

      Herzliche Grüße

      Matthias Scharwies

      --
      "Survive or die trying!"
  5. problematische Seite

    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

    --
    sumpsi - posui - clusi
    1. problematische Seite

      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

      --
      "Survive or die trying!"
      1. problematische Seite

        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

        --
        sumpsi - posui - clusi
    2. problematische Seite

      @@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.

      Guckst du.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. problematische Seite

        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 😀

        Guckst Du hier und hier

        Rolf

        --
        sumpsi - posui - clusi
        1. problematische Seite

          @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. problematische Seite

            Hallo Gunnar,

            weil ich AB UND ZU auch mal weiß, was ich schreibe 😂

            Rolf

            --
            sumpsi - posui - clusi
          2. problematische Seite

            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

            --
            "Survive or die trying!"
            1. problematische Seite

              @@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 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. problematische Seite

                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: flex gesetzt 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

                --
                Rosen sind rot.
                1. problematische Seite

                  Servus!

                  „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“?)

                  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

                  --
                  "Survive or die trying!"
                  1. problematische Seite

                    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

                    --
                    Rosen sind rot.
                    1. problematische Seite

                      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

                      --
                      Rosen sind rot.
                2. problematische Seite

                  @@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 🖖

                  --
                  „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                3. problematische Seite

                  Hallo

                  Es handelt sich um die Längen der Achsen, nicht um Abmessungen, Höhen oder Breiten.

                  Gruss

                  MrMurphy

                  1. problematische Seite

                    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

                    --
                    Rosen sind rot.
                    1. problematische Seite

                      Hallo

                      Nein, die Achsen befinden sich jeweils innerhalb des Flex-Containers und haben damit eine Länge.

                      Gruss

                      MrMurphy

                      1. problematische Seite

                        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

                        --
                        "Survive or die trying!"
                        1. problematische Seite

                          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

                          1. problematische Seite

                            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.

                            • Die primäre Achse wo die verteilung durch justify-content gesteuert wird.
                            • Die sekundäre-Achse die durch align-items gesteuert wird.
                            • Die Achse die durch wrap eingeführt wird die durch align-content gesteuert wird. Sie ist kolinear zur sekundären Achse.
                            1. problematische Seite

                              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

                              1. problematische Seite

                                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.

                          2. problematische Seite

                            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