ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Layout

Flex

rx.flex

Offizielle Doku

Werkstattauftrag

Bitte mehrere Produktkarten nebeneinander aufreihen; wird der Bildschirm schmaler, sollen überzählige Karten in die nächste Zeile rutschen.

rx.flex ist ein Behälter, der seine Kinder per CSS-Flexbox in einer Reihe anordnet. Richtung (horizontal oder vertikal), Umbruch, Ausrichtung und die Verteilung des freien Platzes legst du mit wenigen Props fest. Standard ist die horizontale Richtung (row) ohne Umbruch. Für responsive Oberflächen ist das das am häufigsten verwendete Layout.

Card 1

Card 2

Card 3

Card 4

Card 5

rx.flex(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
    rx.card("Card 4"),
    rx.card("Card 5"),
    spacing="2",
    width="100%",
)

Props ausprobieren

Nur Card 2 ist höher, deshalb sieht man den Unterschied bei align gut. Stellst du wrap auf wrap, rutschen überzählige Karten in die nächste Zeile.

Props ausprobieren

Card 1

Card 2

Card 3

Card 4

Card 5

direction

align

justify

wrap

spacing

rx.flex(
    rx.card("Card 1", width="30%"),
    rx.card("Card 2", width="30%", height="5rem"),
    rx.card("Card 3", width="30%"),
    rx.card("Card 4", width="30%"),
    rx.card("Card 5", width="30%"),
    direction="row",
    align="stretch",
    justify="start",
    wrap="nowrap",
    spacing="2",
    width="100%",
    min_height="14rem",
    padding="12px",
    border="1px dashed var(--gray-7)",
    border_radius="8px",
)

direction ist die Anordnungsrichtung, align die Ausrichtung auf der Querachse, justify die Ausrichtung auf der Anordnungsachse, spacing der Abstand zwischen den Karten.

Prop	Werte	Standard	Verwendung
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`"row"`	Richtung, in der die Kinder angeordnet werden (Hauptachse)
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"stretch"`	Ausrichtung auf der Achse quer zur Hauptachse (Querachse)
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	Ausrichtung entlang der Hauptachse. between setzt die Kinder an beide Enden und verteilt den Rest gleichmäßig
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Ob bei Überlauf in die nächste Zeile umgebrochen wird
`spacing`	`"0"` ~ `"9"`	keiner	Abstand zwischen den Kindern (Radix-Abstandsstufe). Geht auch direkt mit CSS `gap`
`as_child`	`True` / `False`	`False`	Statt Flex wird das Kind-Element gerendert, die Props werden zusammengeführt

Jeder Prop kann mit rx.breakpoints(...) je nach Bildschirmbreite einen anderen Wert bekommen. In den Prop-Beschreibungen der installierten Version 0.10 sind die Achsen von align und justify vertauscht angegeben, das tatsächliche Verhalten entspricht aber der Tabelle oben.

Umbruch

Passen zu viele Kinder nicht in eine Zeile, schrumpfen sie im Standardfall (nowrap). Mit wrap="wrap" behalten sie ihre Größe und rutschen in die nächste Zeile. Schreibst du es wie die offizielle Doku als CSS-Eigenschaft flex_wrap="wrap", ist das Ergebnis dasselbe.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

rx.flex(
    rx.foreach(
        rx.Var.range(10),
        lambda i: rx.card(f"Card {i + 1}", width="16%"),
    ),
    spacing="2",
    wrap="wrap",
    width="100%",
)

Richtung

Mit direction="column" wird von oben nach unten gestapelt. Ein angehängtes -reverse kehrt die Reihenfolge um. Das ist praktisch, wenn du nur die sichtbare Reihenfolge ändern willst, ohne die Reihenfolge im Code anzufassen.

Card 1

Card 2

Card 3

Card 1

Card 2

Card 3

Card 1

Card 2

Card 3

rx.flex(
    rx.flex(rx.card("Card 1"), rx.card("Card 2"), rx.card("Card 3"), spacing="2", direction="column"),
    rx.flex(rx.card("Card 1"), rx.card("Card 2"), rx.card("Card 3"), spacing="2", direction="column-reverse"),
    rx.flex(rx.card("Card 1"), rx.card("Card 2"), rx.card("Card 3"), spacing="2", direction="row-reverse"),
    spacing="6",
    wrap="wrap",
)

Je nach Bildschirmbreite anders

Übergibst du rx.breakpoints Werte von initial (schmalster Bildschirm) über xs sm md lg bis xl, ändert sich der Prop mit der Bildschirmbreite. Die Grenzbreiten der Radix-Props sind xs 520px, sm 768px, md 1024px, lg 1280px und xl 1640px. Unten stehen die Karten auf schmalen Bildschirmen untereinander und ab sm nebeneinander. Ändere ruhig die Breite des Browserfensters.

Card 1

Card 2

Card 3

rx.flex(
    rx.card("Card 1", flex_grow="1"),
    rx.card("Card 2", flex_grow="1"),
    rx.card("Card 3", flex_grow="1"),
    direction=rx.breakpoints(initial="column", sm="row"),
    spacing=rx.breakpoints(initial="2", md="4"),
    width="100%",
)

Größenhinweise: flex_grow, flex_shrink, flex_basis

Kinder in einem Flex regeln ihre Größe über drei CSS-Eigenschaften. Die Größenanpassung erfolgt immer entlang der Hauptachse (bei row die Breite, bei column die Höhe).

flex_basis: die passende Grundgröße. Fehlt sie, wird width (bzw. height) verwendet, und fehlt auch das, die Inhaltsgröße.
flex_grow (Standard "0"): Bei "0" wird das Kind nicht größer als seine Grundgröße. Bei "1" nimmt es den freien Platz ein.
flex_shrink (Standard "1"): Bei "0" wird das Kind nicht kleiner als seine Grundgröße.

Verkleinere mit dem Schieberegler die Breite des äußeren Flex. Die Box mit flex_shrink=0 hält ihre 100px, die anderen schrumpfen zuerst.

flex_shrink=0

flex_shrink=1

flex_grow=0

flex_grow=1

class FlexSizeHintState(rx.State):
    width_pct: int = 100

    @rx.event
    def set_width_pct(self, value: list[float]):
        self.width_pct = int(value[0])

    @rx.var
    def width_css(self) -> str:
        return f"{self.width_pct}%"


def flex_border_box(label, **props):
    return rx.box(label, border="1px solid var(--gray-10)", border_radius="2px", padding="4px", font_size="12px", **props)


rx.box(
    rx.flex(
        flex_border_box("flex_shrink=0", flex_shrink="0", width="100px"),
        flex_border_box("flex_shrink=1", flex_shrink="1", width="200px"),
        flex_border_box("flex_grow=0", flex_grow="0"),
        flex_border_box("flex_grow=1", flex_grow="1"),
        width=FlexSizeHintState.width_css,
        spacing="2",
        margin_bottom="16px",
    ),
    rx.slider(
        min=0,
        max=100,
        value=[FlexSizeHintState.width_pct],
        on_change=FlexSizeHintState.set_width_pct,
    ),
    width="100%",
)

Auftrag erledigt

Jede Karte bekommt mit flex_basis="140px" eine Grundbreite und teilt sich mit flex_grow="1" den freien Platz. Dank wrap="wrap" rutschen die Karten auf schmalen Bildschirmen in die nächste Zeile.

Mug

$12

Plate

$12

Bowl

$12

Vase

$12

Cup

$12

Tray

$12

rx.flex(
    rx.foreach(
        ["Mug", "Plate", "Bowl", "Vase", "Cup", "Tray"],
        lambda name: rx.card(
            rx.text(name, weight="bold"),
            rx.text("$12", size="2", color="var(--gray-11)"),
            flex_basis="140px",
            flex_grow="1",
        ),
    ),
    spacing="3",
    wrap="wrap",
    width="100%",
)

Werkstattnotizen

rx.flex ordnet die Kinder in einer Reihe an. Standard: row, nowrap.
direction ist die Hauptachse, justify die Ausrichtung darauf, align die Ausrichtung auf der Querachse.
Mit wrap="wrap" rutschen überzählige Kinder in die nächste Zeile. Abstände mit spacing "0" bis "9".
Die Größe der Kinder regeln flex_basis · flex_grow · flex_shrink.
Mit rx.breakpoints(initial=…, sm=…) gibt es je nach Bildschirmbreite andere Werte.

← Zurück

Layout · Box

Weiter →

Layout · Stack

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex