MudGuard: Flex-Box: gibt es eine Pseudoklasse o.ä. für erstes/letztes Element einer Reihe

Hi,

ich hab eine Seite (nicht-öffentlich), auf der es eine große Box gibt mit

#meineBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
}

Je nach Größe des Viewports und der enthaltenen Boxen bricht das also nach irgendwelchen mir nicht bekannten Boxen um.

Ich hätte jetzt gerne die jeweils ersten/letzten Boxen einer Zeile mit anderen Styles versorgt als die dazwischen.

Geht das?

Und wenn ja: wie?

Gibt es da eine Pseudoklasse à la :first-in-row oder :last-in-row oder irgendeinen anderen Mechanismus?

cu,
Andreas a/k/a MudGuard

  1. @@MudGuard

    Je nach Größe des Viewports und der enthaltenen Boxen bricht das also nach irgendwelchen mir nicht bekannten Boxen um.

    Ich hätte jetzt gerne die jeweils ersten/letzten Boxen einer Zeile mit anderen Styles versorgt als die dazwischen.

    Haben die Boxen gleiche Breite? Dann ließe sich sicher mit media queries und :nth-child() was machen. Aufwändig, aber machbar.

    Aber dann wäre vielleicht auch Grid Mittel der Wahl, nicht Flexbox.

    Haben sie unterschiedliche Breite, also in etwa so wie display: inline-block-Boxen? Dann stößt du an die Grenzen von CSS, AFAIS.

    Da müsstest du wohl mit JavaScript ran: offsetLeft abfragen – bezogen aufs Containerelement, das dazu positioniert sein muss (z.B. mit position: relative). So wie ich das für hanging punctuation mache.

    🖖 Stay hard! Stay hungry! Stay alive! Stay home!

    --
    Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)
    1. Hi,

      Je nach Größe des Viewports und der enthaltenen Boxen bricht das also nach irgendwelchen mir nicht bekannten Boxen um.

      Ich hätte jetzt gerne die jeweils ersten/letzten Boxen einer Zeile mit anderen Styles versorgt als die dazwischen.

      Haben die Boxen gleiche Breite? Dann ließe sich sicher mit media queries und :nth-child() was machen. Aufwändig, aber machbar.

      Aber dann wäre vielleicht auch Grid Mittel der Wahl, nicht Flexbox.

      Ne, die Boxen haben unterschiedliche Breiten, der Inhalt ändert sich immer wieder.

      Haben sie unterschiedliche Breite, also in etwa so wie display: inline-block-Boxen? Dann stößt du an die Grenzen von CSS, AFAIS.

      ja.

      Ok, CSS fehlt also noch entscheidendes - sollte man das dann überhaupt schon benutzen? ;-)

      Da müsstest du wohl mit JavaScript ran: offsetLeft abfragen – bezogen aufs Containerelement, das dazu positioniert sein muss (z.B. mit position: relative). So wie ich das für hanging punctuation mache.

      Ne, das ist mir den Aufwand nicht wert. Wenn das über Pseudoklasse oder so einfach gewesen wäre, dann ja - aber script-Fummelei mach ich nicht.

      🖖 Stay hard! Stay hungry! Stay alive! Stay home!

      Sorry, hab grade gegessen. Wobei - Hunger hab ich immer noch …

      cu,
      Andreas a/k/a MudGuard

      1. Sorry, hab grade gegessen. Wobei - Hunger hab ich immer noch …

        Tipp: Es gibt genügend Webseiten, die Dir ganz schnell Kekse liefern...