Gunnar Bittersmann: Flexbox

problematische Seite

Ich hätte gern, dass das erste Flexitems allein in seiner Spalte steht, ohne jedoch die volle Höhe zu haben. Hab ihm deshalb margin-bottom: 100% verpasst.

Nachträglich lese ich die Höhe der Flexitems mit JavaScript aus. Funktioniert bestens in Firefox; mittelprächtig in Blink (Chrome); gar nicht in WebKit (Safari) – ich krieg falsche Werte.

Bekomme ich das Layout auch anders als mit margin-bottom: 100% hin?

LLAP 🖖

--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

akzeptierte Antworten

  1. problematische Seite

    Sorry, kann nicht helfen. Aber: Irgendwie beruhigend, dass du mal was nicht weißt... ;-)

    1. problematische Seite

      @@ottogal

      Aber: Irgendwie beruhigend, dass du mal was nicht weißt... ;-)

      Och, das kommt doch ständig vor: in vielen Threads, aus denen ich mich raushalte.

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      1. problematische Seite

        Hallo Gunnar,

        Aber: Irgendwie beruhigend, dass du mal was nicht weißt... ;-)

        Och, das kommt doch ständig vor: in vielen Threads, aus denen ich mich raushalte.

        das nenn ich mal eine gute Strategie. Denn viele Leute haben keine Ahnung, meinen aber trotzdem, andauernd ihren Senf dazu geben zu müssen.

        So long,
         Martin

        --
        Man sollte keinen Senf von sich geben, wenn man nicht auch das Würstchen dazu liefern kann.
  2. problematische Seite

    Hallo Gunnar,

    Ich hätte gern, dass das erste Flexitems allein in seiner Spalte steht, ohne jedoch die volle Höhe zu haben. Hab ihm deshalb margin-bottom: 100% verpasst.

    Bekomme ich das Layout auch anders als mit margin-bottom: 100% hin?

    Da könntest du ein Pseudo-Element setzen (kein CodePen weil es mich nichts speichern lassen will ohne Registrierung):

    #no1
    {
    	background-color: hsl(0, 100%, 40%);
    	flex-basis: 6em;
    	order:-1;
    }
    
    body > div::after {
    	order:-1;
    	flex:0 100%;
    	content:"";
    }
    

    Damit kann man aber halt nur maximal zwei Breaks erzwingen. Und schön ist anders; leider ist die vorgesehene Lösung (break-after/break-before bzw page-braek-after/page-break-before) noch nicht besonders verbreitet, IIRC kann das nur der Firefox.

    LG,
    CK

    Edit: Debug-Foo entfernt

    1. problematische Seite

      @@Christian Kruse

      Da könntest du ein Pseudo-Element setzen

      Ah ja, das könnte ich.

      body > div::after {
      	order:-1;
      

      Ich hab ::before genommen, dann spare ich das order: -1 dafür. ;-)

      Anfänglich margin-bottom: 100% für dieses Pseudoelement – funzt.

      	flex:0 100%;
      

      Aber das ist schöner. Danke.

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    2. problematische Seite

      @@Christian Kruse

      (kein CodePen weil es mich nichts speichern lassen will ohne Registrierung)

      Hab ich dann mal gemacht.

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
  3. problematische Seite

    @@Gunnar Bittersmann

    Nachträglich lese ich die Höhe der Flexitems mit JavaScript aus. Funktioniert bestens in Firefox; mittelprächtig in Blink (Chrome); gar nicht in WebKit (Safari) – ich krieg falsche Werte.

    BTW, ich hab keinen Schimmer, warum. Im Codepen kommt die richtige Höhe raus.

    In der Anwendung, wo ich das einsetze, kommt im Blink ein etwas zu niedriger Wert (lässt sich durch Addition einer magic number zurechtfrickeln), im Safari jedoch unabhängig vom Inhalt ein konstanter Wert (28, IIRC).

    LLAP 🖖

    --
    “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. problematische Seite

      @@Gunnar Bittersmann

      Nachträglich lese ich die Höhe der Flexitems mit JavaScript aus. Funktioniert bestens in Firefox; mittelprächtig in Blink (Chrome); gar nicht in WebKit (Safari) – ich krieg falsche Werte.

      BTW, ich hab keinen Schimmer, warum. Im Codepen kommt die richtige Höhe raus.

      versuch mal die höhe nach window load abzufragen. dann sollte es klappen.

      hatte vor kurzem das selbe problem, und es sieht so aus, als würde chrome doc ready feuern, wenn das css noch nicht gerendert ist. den richtigen wert habe ich bei meinen versuchen auch schon erhalten, wenn ich die abfrage mit settimeout um 0ms (bis zum nächsten cycle) verzögert habe.