Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

💡 alignContent for cross-axis distribution of flex lines

Aperta
#64 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
typescript
Ambito
cli

Direzione di ricerca

Inizia da test/align-content.test.ts e ispeziona le strutture di layout di clay/clay.h vendorizzate e il pass di layout che gestisce le righe mandate a capo. Esamina il lavoro sull’allineamento delle stringhe letterali in #42 e la dipendenza dal wrapping su più righe in #63. Il lavoro è completato quando le varianti di alignContent richieste distribuiscono più righe flex come descritto, incluso l’esempio flex-end, senza posizionamento lato JS.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement

Is your feature request related to a problem?

Once a container can wrap into multiple flex lines, there's no way to distribute those lines along the cross axis—they pack to the start. With a 2-wide × 6-tall wrap container holding four single-cell children (two lines of two), the lines sit at the top (rows 0-1), with no way to push them to the end, center them, or space them out.

Describe the solution you'd like

An alignContent layout key that distributes free cross-axis space among the flex lines. For the example, alignContent: "flex-end" should push the two lines to the bottom (rows 4-5).

open("root", {
  layout: {
    direction: "ltr",
    flexWrap: "wrap",
    alignContent: "flex-end", // "flex-start" (default) | "flex-end" | "center" | "space-*" | "stretch"
  },
});

alignContent should mirror the CSS align-content property. It's inert until there are multiple flex lines, so it depends on multi-line wrapping (#63).

Describe alternatives you've considered

Without renderer support, the only option is to compute line breaks and cross-axis offsets in JS and emit absolutely-positioned rows—which duplicates the layout engine's line-breaking and can't react to a resize.

Additional context

Failing test case on nm/repro/align-content (test · diff).

Clay's Clay_ChildAlignment (in the vendored clay/clay.h) offers only start/center/end on the cross axis; distributing whole flex lines—including the space-between/around/evenly/stretch variants—is a local addition to the layout pass. New string values should line up with the alignment string-literal refactor in #42 (re: #3).

Lingua principale
TypeScript
Stelle
42
Fork
2
Merge medio
2g 5h
PR unite (30g)
12

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di bombshell-dev/tty

Tutte le issue di bombshell-dev/tty

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.