{ "vercy": "1.0-draft", "publication": { "status": "research-draft", "adjudicationStatus": "unreviewed", "publishableCanonical": false, "generatedAt": "2026-09-12T08:55:42Z", "providers": [ "Codex" ], "breadth": "recalled by Codex without web access - no source was read", "missingProviders": [], "pass": 2, "cost": { "grok": { "seconds": 22.0, "error": "Reading additional input from stdin...\nOpenAI Codex v0.153.4\n--------\nworkdir: R:\\02_PROJECTS\\02_Meta_Models_Platforms\\Ver.cy\\current\\thing-registry-backlog\nmodel: gpt-6-astra\nprovider: openai\napproval: never\nsandbox: read-only\nreasoning effort: none\nreasoning summaries: none\nsession id: 01a094d3-41c6-7970-80dc-a622e6be9fec\n--------\nuser\nDescribe what is already known about one registered thing. Answer as JSON only, no prose around it.\n\nThing: CSS Flex Box Layout\nSense to describe: (none recorded)\nDomain code: INF.MED\nAlso known as: (none)\n\n\nContext for this batch of 1001 things:\n# Batch 043: ", "usd": 0.0, "recall": true }, "codex": { "seconds": 74.9, "error": "Reading additional input from stdin...\nOpenAI Codex v0.153.4\n--------\nworkdir: R:\\02_PROJECTS\\02_Meta_Models_Platforms\\Ver.cy\\current\\thing-registry-backlog\nmodel: gpt-6-astra\nprovider: openai\napproval: never\nsandbox: read-only\nreasoning effort: none\nreasoning summaries: none\nsession id: 01a094d3-41c4-7981-93df-bc01d33447b2\n--------\nuser\nYou are drafting a Vercy meta-model for one registered thing. Answer as JSON only, no prose around it.\n\nThing: CSS Flex Box Layout\nRegistry id: vr.tr.css-flex-box-layout\nPlane / domain: INF / INF.MED\nRegistry definition: (none recorded)\nNames folded into this " } }, "enrichment": { "pass": 3, "engine": "claude", "producedAt": "2026-10-06T12:00:00Z", "ingestedAt": "2026-10-06T08:45:54+00:00", "fields": [ "agent_conduct", "ethics", "failure_modes_and_hazards", "owners", "standards_and_regulation" ] }, "gate": { "passed": true, "version": "1.0", "at": "2026-10-07T10:10:26+00:00", "evidence": [ "completeness 1.00", "sense: Wikidata description", "2 live sources", "review by codex: pass" ] } }, "metaModel": { "id": "THING-Q17049185", "registryId": "vr.tr.css-flex-box-layout", "name": "CSS Flex Box Layout", "version": "0.1.0-research.1", "entryKind": "thing", "family": "Thing Registry", "domain": [ "INF.MED" ], "status": "research-draft" }, "canonicalUrl": "https://ver.cy/models/thing/q17049185/", "model": { "registry_id": "vr.tr.css-flex-box-layout", "name": "CSS Flex Box Layout", "purpose": "Enable an AI agent to recognise CSS Flex Box Layout, assess a flex formatting context, and choose layout changes that preserve sizing, reading order and responsive behaviour.", "definition": "CSS Flex Box Layout, usually called Flexbox, is a CSS layout model that arranges flex items along a main axis, distributes available space through flexible sizing, and controls alignment along the main and cross axes.", "scope_statement": "This model owns CSS Flex Box Layout as a layout mechanism and the evidence needed to assess its use by a flex container and its flex items, including axes, line formation, flexible sizing, alignment and ordering.", "in_scope": [ "Establishment of flex containers and identification of participating flex items", "Main and cross axes determined by flex-direction and writing mode", "Flex line formation, available space and flexible item sizing", "Alignment, gaps, margins and overflow within flex layouts", "Relationships between visual order, document order and accessible navigation", "Declared, computed and observed layout behaviour under identified rendering conditions" ], "out_of_scope": [ "CSS Grid track sizing and coordinated two-dimensional placement", "General HTML semantics, document content and application interaction design", "The CSS cascade and selector system except where they determine effective flex properties", "Normal flow, floats and positioned layout except at their boundaries with flex participation", "Browser implementation internals and the complete CSS specification corpus" ], "distinguishing_features": [ "A flex or inline-flex display configuration establishes a flex formatting context for participating children; it does not make all descendants flex items.", "Layout distributes items along a main axis with a perpendicular cross axis; row does not universally mean left-to-right horizontal placement.", "Wrapped flex lines distribute main-axis space independently, unlike a grid that coordinates items through shared tracks.", "Item sizing can distribute positive or negative free space through flex-grow, flex-shrink and flex-basis, subject to size constraints.", "The order property and reversed flex directions can change visual arrangement without changing DOM order." ], "characteristics": [ { "name": "Container display configuration", "kind": "category", "unit_or_values": "Specified and computed display values, including flex and inline-flex", "why_it_matters": "Identifies whether a flex formatting context exists and how the container participates in its parent's layout." }, { "name": "Flex participation", "kind": "relation", "unit_or_values": "Container-to-item relationship, with anonymous items and nonparticipating children identified", "why_it_matters": "Prevents applying flex-item reasoning to descendants or positioned children that do not participate." }, { "name": "Axis configuration", "kind": "category", "unit_or_values": "flex-direction: row, row-reverse, column or column-reverse; writing-mode and direction", "why_it_matters": "Determines physical main-axis and cross-axis orientation and the meaning of start and end." }, { "name": "Wrapping configuration", "kind": "category", "unit_or_values": "flex-wrap: nowrap, wrap or wrap-reverse", "why_it_matters": "Controls whether items form multiple lines and how those lines are stacked." }, { "name": "Item flexibility", "kind": "measurement", "unit_or_values": "Unitless flex-grow and flex-shrink factors; flex-basis as a CSS size value or keyword", "why_it_matters": "Records how each item contributes its starting size and participates in free-space distribution." }, { "name": "Sizing constraints", "kind": "category", "unit_or_values": "Main and cross sizes, minimum and maximum sizes, intrinsic contributions, aspect ratio and overflow configuration", "why_it_matters": "Explains why an item may stop growing, resist shrinking or exceed the container." }, { "name": "Observed layout geometry", "kind": "measurement", "unit_or_values": "Container and item dimensions, gaps and overflow in CSS pixels; observed line count as an integer", "why_it_matters": "Allows comparison of intended layout with rendered results under recorded conditions." }, { "name": "Alignment configuration", "kind": "category", "unit_or_values": "Effective justify-content, align-items, align-self, align-content, row-gap, column-gap and auto margins", "why_it_matters": "Explains placement within lines and distribution of lines across the container." }, { "name": "Ordering correspondence", "kind": "relation", "unit_or_values": "Mapping between DOM sequence, order values, visual sequence and observed keyboard navigation", "why_it_matters": "Supports detection of confusing differences between presentation and interaction." }, { "name": "Rendering conditions", "kind": "relation", "unit_or_values": "Browser and version, viewport, zoom, fonts, content sample and applicable style rules", "why_it_matters": "Makes layout observations reproducible and prevents treating one rendering as universal." } ], "affordances": [ "Identify a flex container and map the items that actually participate in its layout.", "Explain wrapping, unused space or overflow through axes, flex factors and size constraints.", "Propose targeted changes to sizing, alignment, gaps or wrapping and verify the resulting geometry.", "Evaluate behaviour with narrow containers, long content, changed writing modes and increased text size.", "Detect visual reordering that conflicts with document meaning or keyboard navigation.", "Decide whether independently sized flex lines meet the requirement or a neighbouring layout mechanism should be considered." ], "agent_conduct": { "may": [ "Write and review flexbox layouts in projects it is authorized to change.", "Explain flexbox properties and how they differ from grid layout." ], "must_not": [ "Ship layouts that break reading or focus order for keyboard and screen-reader users.", "Use visual reordering that makes the on-screen order differ from the logical order without care.", "Hide content needed for accessibility through layout tricks." ], "requires_human": [ "Changing layouts on a live site that many people depend on." ] }, "ethics": { "considerations": [ "Layout choices decide whether people with disabilities can use a page." ], "affected_parties": [ "Users with disabilities", "Web developers", "Site visitors on small screens" ] }, "owners": { "steward": "Nobody owns it; it is defined by a public web standard.", "master_systems": [] }, "failure_modes_and_hazards": [ "Visual reordering can confuse screen-reader and keyboard users.", "Overflowing items can hide content on small screens." ], "standards_and_regulation": [ "CSS Flexible Box Layout Module Level 1, World Wide Web Consortium.", "Web Content Accessibility Guidelines (WCAG) 2.2, World Wide Web Consortium." ], "what_it_is_for": [ "This layout model is used in web pages and applications to arrange interface elements along a row or column.", "It supports flexible sizing, spacing and alignment in navigation bars, toolbars and other components that adapt to available space." ], "facets_not_applicable": { "recognition": "The layout model is an abstract set of rules whose use cannot be established from rendered appearance alone." } }, "sources": [ { "id": "wikidata", "title": "Wikidata item Q17049185: CSS Flex Box Layout", "url": "https://www.wikidata.org/wiki/Q17049185", "url_status": "live", "what_it_supports": "identity and sense of the item", "checked_by": "wikidata-api" }, { "id": "wikipedia-en", "title": "Wikipedia: Flexbox", "url": "https://en.wikipedia.org/wiki/Flexbox", "url_status": "live", "what_it_supports": "general description of the item", "checked_by": "wikidata-api sitelink" } ], "structure": { "bundles": [ { "id": "formatting-context-and-participation", "name": "Formatting Context and Participation", "description": "Establishes where flex layout operates and which generated boxes belong to it.", "rationale": "An agent must identify the actual flex container and items before interpreting flex properties or proposing changes.", "layers": [ { "id": "container-establishment", "name": "Container Establishment", "description": "Separates a container's internal layout mechanism from its participation in the surrounding layout.", "findings": [ { "id": "effective-flex-context", "name": "Effective Flex Context", "description": "Record the effective display configuration and the element or box establishing the flex formatting context.", "questions": [ { "text": "Which computed display value establishes this flex formatting context?", "kind": "definition", "id": "effective-flex-context-q01" }, { "text": "Does the container participate in its parent as a block-level box, an inline-level box or an item governed by another layout context?", "kind": "boundary", "id": "effective-flex-context-q02" } ] } ] }, { "id": "item-membership", "name": "Item Membership", "description": "Identifies participating boxes rather than assuming every descendant is a flex item.", "findings": [ { "id": "participating-box-inventory", "name": "Participating Box Inventory", "description": "Record flex items, relevant anonymous text items and children excluded from normal flex participation.", "questions": [ { "text": "Which generated child boxes participate as flex items, including any anonymous items created from text?", "kind": "boundary", "id": "participating-box-inventory-q01" }, { "text": "Which apparent children are out of flow, generate no box or belong to a nested formatting context?", "kind": "boundary", "id": "participating-box-inventory-q02" } ] } ] } ] }, { "id": "axes-and-line-formation", "name": "Axes and Line Formation", "description": "Captures direction-sensitive geometry and how items are collected into flex lines.", "rationale": "Flex behaviour depends on logical axes and independent lines, so physical left-right assumptions or grid-like expectations produce incorrect diagnoses.", "layers": [ { "id": "logical-axis-resolution", "name": "Logical Axis Resolution", "description": "Resolves flex direction against the container's writing mode and text direction.", "findings": [ { "id": "resolved-axis-map", "name": "Resolved Axis Map", "description": "Record the physical orientation and start and end edges of both axes.", "questions": [ { "text": "How do flex-direction, writing-mode and direction jointly determine main-start, main-end, cross-start and cross-end?", "kind": "definition", "id": "resolved-axis-map-q01" }, { "text": "Which intended placements should follow logical start and end when the writing mode or text direction changes?", "kind": "action", "id": "resolved-axis-map-q02" } ] } ] }, { "id": "wrapping-and-independent-lines", "name": "Wrapping and Independent Lines", "description": "Records line membership and the limits of alignment between separately sized lines.", "findings": [ { "id": "line-membership-and-breaks", "name": "Line Membership and Breaks", "description": "Assess line formation using wrapping configuration, available main size, item hypothetical outer sizes and gaps.", "questions": [ { "text": "At the recorded container size, which items occupy each line and where do line breaks occur?", "kind": "measurement", "id": "line-membership-and-breaks-q01" }, { "text": "Does the requirement permit each line to distribute space independently, or does it require shared column or row tracks?", "kind": "boundary", "id": "line-membership-and-breaks-q02" } ] } ] } ] }, { "id": "flexible-sizing-and-overflow", "name": "Flexible Sizing and Overflow", "description": "Explains item base sizes, free-space distribution and constraints that determine final dimensions.", "rationale": "Flex factors alone cannot explain rendered sizes; intrinsic content and minimum and maximum constraints often determine whether a layout fits.", "layers": [ { "id": "base-size-and-flex-factors", "name": "Base Size and Flex Factors", "description": "Records starting sizes and the factors governing growth and shrinkage.", "findings": [ { "id": "free-space-allocation", "name": "Free-Space Allocation", "description": "Assess flex-basis and resolved flex factors per line, including the base-size weighting of shrink distribution.", "questions": [ { "text": "What effective flex-grow, flex-shrink and flex-basis values apply to each item after any shorthand declarations?", "kind": "measurement", "id": "free-space-allocation-q01" }, { "text": "How do the flex base sizes and grow or scaled shrink factors explain the observed distribution of positive or negative free space?", "kind": "measurement", "id": "free-space-allocation-q02" } ] } ] }, { "id": "constraints-and-content-pressure", "name": "Constraints and Content Pressure", "description": "Records constraints and content contributions that limit flexible sizing.", "findings": [ { "id": "shrink-limits-and-overflow", "name": "Shrink Limits and Overflow", "description": "Identify whether minimum sizes, intrinsic content, aspect ratio or explicit bounds prevent the requested fit.", "questions": [ { "text": "Which minimum or maximum sizes, automatic minimum-size behaviour or intrinsic contributions constrain each overflowing item?", "kind": "measurement", "id": "shrink-limits-and-overflow-q01" }, { "text": "Would adjusting a minimum size, allowing content wrapping or providing scrolling satisfy the content requirement, and what rendered evidence supports that choice?", "kind": "action", "id": "shrink-limits-and-overflow-q02" } ] } ] } ] }, { "id": "alignment-and-spacing", "name": "Alignment and Spacing", "description": "Distinguishes main-axis distribution, cross-axis item alignment and cross-axis line distribution.", "rationale": "Alignment properties act on different subjects and depend on available space; an agent must identify the relevant axis and alignment subject.", "layers": [ { "id": "within-line-placement", "name": "Within-Line Placement", "description": "Explains item placement after flexible sizing, including gaps and auto margins.", "findings": [ { "id": "main-axis-space-use", "name": "Main-Axis Space Use", "description": "Record how gaps, auto margins and justify-content contribute to spacing within each flex line.", "questions": [ { "text": "After flexible sizing and auto-margin resolution, how much main-axis free space remains for justify-content?", "kind": "measurement", "id": "main-axis-space-use-q01" }, { "text": "Should the requested separation be represented by a fixed gap, an auto margin or distributed free space?", "kind": "action", "id": "main-axis-space-use-q02" } ] } ] }, { "id": "cross-axis-items-and-lines", "name": "Cross-Axis Items and Lines", "description": "Separates alignment of items within a line from distribution of lines within the container.", "findings": [ { "id": "cross-axis-alignment-subject", "name": "Cross-Axis Alignment Subject", "description": "Record whether the intended change concerns an individual item, items within lines or the set of flex lines.", "questions": [ { "text": "Is the requested effect controlled by align-self, align-items or align-content, given the wrapping mode and available cross size?", "kind": "definition", "id": "cross-axis-alignment-subject-q01" }, { "text": "Do explicit cross sizes, cross-axis auto margins or baseline requirements explain why the expected stretch or alignment does not occur?", "kind": "measurement", "id": "cross-axis-alignment-subject-q02" } ] } ] } ] }, { "id": "ordering-and-rendered-validation", "name": "Ordering and Rendered Validation", "description": "Connects flex presentation to meaningful sequence and reproducible evidence across rendering conditions.", "rationale": "A visually successful flex layout can still confuse navigation or fail when content, viewport or rendering conditions change.", "layers": [ { "id": "visual-and-document-sequence", "name": "Visual and Document Sequence", "description": "Compares order-modified visual arrangement with document structure and observed interaction.", "findings": [ { "id": "sequence-correspondence", "name": "Sequence Correspondence", "description": "Record the effects of order values and reversed directions without assuming that visual reordering changes semantic or keyboard sequence.", "questions": [ { "text": "Where do DOM order, order values and reversed flex directions produce different visual and document sequences?", "kind": "measurement", "id": "sequence-correspondence-q01" }, { "text": "Does observed keyboard navigation and reading order preserve the intended meaning, or should the document sequence be changed?", "kind": "action", "id": "sequence-correspondence-q02" } ] } ] }, { "id": "reproducible-layout-checks", "name": "Reproducible Layout Checks", "description": "Records the rendering conditions and representative cases needed to assess a proposed flex change.", "findings": [ { "id": "layout-evidence-and-acceptance", "name": "Layout Evidence and Acceptance", "description": "Attach observations to explicit environments and check fit, visibility and sequence against the intended behaviour.", "questions": [ { "text": "Which browser version, viewport, zoom, fonts, content and effective styles produced the recorded layout?", "kind": "provenance", "id": "layout-evidence-and-acceptance-q01" }, { "text": "Does the proposed change preserve required content visibility, wrapping and navigation with narrow containers, long unbreakable content and increased text size?", "kind": "action", "id": "layout-evidence-and-acceptance-q02" } ] } ] } ] }, { "id": "evidence-and-external-alignment", "name": "Evidence and external alignment", "description": "What the world already says about this thing, gathered so the model can be checked against it.", "rationale": "A model that cannot be lined up against existing standards, identifiers and practice cannot be adopted by anyone who already uses them.", "layers": [ { "id": "reported-evidence", "name": "Reported evidence", "description": "Findings from the breadth pass, kept separate from the structural claims.", "findings": [ { "id": "evidence-confidence-notes", "name": "Check these first", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ "This description is based on recall; no sources were consulted.", "The listed varieties are overlapping configurations of one layout model, not separate standards.", "Exact specification status and browser-specific behavior should be checked before implementation guidance is published." ], "questions": [ { "id": "evidence-confidence-notes-q01", "text": "Which of these check these first hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] }, { "id": "evidence-kinds", "name": "Kinds and varieties", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ "Row-oriented layout", "Column-oriented layout", "Single-line layout", "Wrapping multiline layout" ], "questions": [ { "id": "evidence-kinds-q01", "text": "Which of these kinds and varieties hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] }, { "id": "evidence-identifiers", "name": "Identifiers and schemes", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ { "scheme": "CSS display property values", "value_or_pattern": "display: flex; display: inline-flex", "note": "Both establish flex layout for the container's contents; they differ in the container's outer display behavior." }, { "scheme": "CSS module title", "value_or_pattern": "CSS Flexible Box Layout Module Level 1", "note": "Names the specification defining the Flexbox layout model." } ], "questions": [ { "id": "evidence-identifiers-q01", "text": "Which of these identifiers and schemes hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] }, { "id": "evidence-standards-and-regulation", "name": "Standards and regulation", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ "CSS Flexible Box Layout Module Level 1 - W3C", "CSS Box Alignment Module Level 3 - W3C", "CSS Display Module Level 3 - W3C" ], "questions": [ { "id": "evidence-standards-and-regulation-q01", "text": "Which of these standards and regulation hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] }, { "id": "evidence-real-world-use", "name": "Real-world use", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ "Arranging navigation links and toolbar controls", "Aligning icons, labels and buttons within interface components", "Distributing space among items in responsive rows or columns", "Centering content within a container", "Creating wrapping groups of cards or controls" ], "questions": [ { "id": "evidence-real-world-use-q01", "text": "Which of these real-world use hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] }, { "id": "evidence-failure-modes-and-hazards", "name": "Failure modes and hazards", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ "Automatic minimum sizes can prevent items from shrinking enough, causing overflow with long text or large intrinsic content.", "The order property and reversed directions can make visual order differ from reading and keyboard navigation order.", "Flex wrapping distributes space independently on each line, so items on different lines may fail to align as a shared grid.", "Confusing main and cross axes can produce incorrect alignment when flex-direction or writing mode changes.", "Default shrinking can make items narrower than their specified width when the container has insufficient space." ], "questions": [ { "id": "evidence-failure-modes-and-hazards-q01", "text": "Which of these failure modes and hazards hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] }, { "id": "evidence-regional-variation", "name": "Regional variation", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ "Writing direction and writing mode affect axis orientation: a row need not run left to right or even horizontally." ], "questions": [ { "id": "evidence-regional-variation-q01", "text": "Which of these regional variation hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] }, { "id": "evidence-neighbours", "name": "Neighbouring kinds and how to tell them apart", "description": "Recalled without web access and unsourced; every item is a lead to verify.", "evidence": [ { "name": "CSS", "difference": "CSS is the broader styling language; Flexbox is one of its layout models." }, { "name": "CSS Grid Layout", "difference": "Grid coordinates rows and columns together; Flexbox lays out items primarily along one axis and treats wrapped lines independently." }, { "name": "CSS normal flow", "difference": "Normal flow uses block and inline formatting; a flex container establishes a flex formatting context for its items." }, { "name": "CSS Box Alignment", "difference": "Box Alignment defines alignment concepts across multiple layout models; Flexbox defines a particular layout model that uses alignment properties." } ], "questions": [ { "id": "evidence-neighbours-q01", "text": "Which of these neighbouring kinds and how to tell them apart hold for the sense of CSS Flex Box Layout this model covers, and on what evidence?", "kind": "provenance" } ] } ] } ] } ] }, "openQuestions": [ "Which specification revision and associated CSS Sizing, Box Alignment and Display provisions should provide the authoritative basis for the researched publication?", "Which browser and assistive-technology combinations must be supported, and which flex sizing, baseline or navigation differences require documented exceptions?", "How deeply should the publication model percentage flex-basis resolution and definite versus indefinite container sizes?", "Which less common participation cases, including anonymous items, display: contents and collapsed flex items, require explicit treatment for the intended agents?", "Does an existing Vercy world model already own this concept, requiring this registry entry to link to it instead of receiving a separate publication?" ], "statistics": { "bundles": 6, "layers": 11, "findings": 18, "questions": 28 } }