CSS Flex Box Layout
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.
Bundle → Layer → Finding → Questions Filled
6 bundles · 11 layers · 18 findings · 28 questions
Formatting Context and Participation Establishes where flex layout operates and which generated boxes belong to it.
Container Establishment
Separates a container's internal layout mechanism from its participation in the surrounding layout.
Effective Flex Context
Record the effective display configuration and the element or box establishing the flex formatting context.
- Which computed display value establishes this flex formatting context? definition
- Does the container participate in its parent as a block-level box, an inline-level box or an item governed by another layout context? boundary
Item Membership
Identifies participating boxes rather than assuming every descendant is a flex item.
Participating Box Inventory
Record flex items, relevant anonymous text items and children excluded from normal flex participation.
- Which generated child boxes participate as flex items, including any anonymous items created from text? boundary
- Which apparent children are out of flow, generate no box or belong to a nested formatting context? boundary
Axes and Line Formation Captures direction-sensitive geometry and how items are collected into flex lines.
Logical Axis Resolution
Resolves flex direction against the container's writing mode and text direction.
Resolved Axis Map
Record the physical orientation and start and end edges of both axes.
- How do flex-direction, writing-mode and direction jointly determine main-start, main-end, cross-start and cross-end? definition
- Which intended placements should follow logical start and end when the writing mode or text direction changes? action
Wrapping and Independent Lines
Records line membership and the limits of alignment between separately sized lines.
Line Membership and Breaks
Assess line formation using wrapping configuration, available main size, item hypothetical outer sizes and gaps.
- At the recorded container size, which items occupy each line and where do line breaks occur? measurement
- Does the requirement permit each line to distribute space independently, or does it require shared column or row tracks? boundary
Flexible Sizing and Overflow Explains item base sizes, free-space distribution and constraints that determine final dimensions.
Base Size and Flex Factors
Records starting sizes and the factors governing growth and shrinkage.
Free-Space Allocation
Assess flex-basis and resolved flex factors per line, including the base-size weighting of shrink distribution.
- What effective flex-grow, flex-shrink and flex-basis values apply to each item after any shorthand declarations? measurement
- How do the flex base sizes and grow or scaled shrink factors explain the observed distribution of positive or negative free space? measurement
Constraints and Content Pressure
Records constraints and content contributions that limit flexible sizing.
Shrink Limits and Overflow
Identify whether minimum sizes, intrinsic content, aspect ratio or explicit bounds prevent the requested fit.
- Which minimum or maximum sizes, automatic minimum-size behaviour or intrinsic contributions constrain each overflowing item? measurement
- Would adjusting a minimum size, allowing content wrapping or providing scrolling satisfy the content requirement, and what rendered evidence supports that choice? action
Alignment and Spacing Distinguishes main-axis distribution, cross-axis item alignment and cross-axis line distribution.
Within-Line Placement
Explains item placement after flexible sizing, including gaps and auto margins.
Main-Axis Space Use
Record how gaps, auto margins and justify-content contribute to spacing within each flex line.
- After flexible sizing and auto-margin resolution, how much main-axis free space remains for justify-content? measurement
- Should the requested separation be represented by a fixed gap, an auto margin or distributed free space? action
Cross-Axis Items and Lines
Separates alignment of items within a line from distribution of lines within the container.
Cross-Axis Alignment Subject
Record whether the intended change concerns an individual item, items within lines or the set of flex lines.
- Is the requested effect controlled by align-self, align-items or align-content, given the wrapping mode and available cross size? definition
- Do explicit cross sizes, cross-axis auto margins or baseline requirements explain why the expected stretch or alignment does not occur? measurement
Ordering and Rendered Validation Connects flex presentation to meaningful sequence and reproducible evidence across rendering conditions.
Visual and Document Sequence
Compares order-modified visual arrangement with document structure and observed interaction.
Sequence Correspondence
Record the effects of order values and reversed directions without assuming that visual reordering changes semantic or keyboard sequence.
- Where do DOM order, order values and reversed flex directions produce different visual and document sequences? measurement
- Does observed keyboard navigation and reading order preserve the intended meaning, or should the document sequence be changed? action
Reproducible Layout Checks
Records the rendering conditions and representative cases needed to assess a proposed flex change.
Layout Evidence and Acceptance
Attach observations to explicit environments and check fit, visibility and sequence against the intended behaviour.
- Which browser version, viewport, zoom, fonts, content and effective styles produced the recorded layout? provenance
- Does the proposed change preserve required content visibility, wrapping and navigation with narrow containers, long unbreakable content and increased text size? action
Evidence and external alignment What the world already says about this thing, gathered so the model can be checked against it.
Reported evidence
Findings from the breadth pass, kept separate from the structural claims.
Check these first
Recalled without web access and unsourced; every item is a lead to verify.
- Which of these check these first hold for the sense of CSS Flex Box Layout this model covers, and on what evidence? provenance
Kinds and varieties
Recalled without web access and unsourced; every item is a lead to verify.
- Which of these kinds and varieties hold for the sense of CSS Flex Box Layout this model covers, and on what evidence? provenance
Identifiers and schemes
Recalled without web access and unsourced; every item is a lead to verify.
- Which of these identifiers and schemes hold for the sense of CSS Flex Box Layout this model covers, and on what evidence? provenance
Standards and regulation
Recalled without web access and unsourced; every item is a lead to verify.
- Which of these standards and regulation hold for the sense of CSS Flex Box Layout this model covers, and on what evidence? provenance
Real-world use
Recalled without web access and unsourced; every item is a lead to verify.
- Which of these real-world use hold for the sense of CSS Flex Box Layout this model covers, and on what evidence? provenance
Failure modes and hazards
Recalled without web access and unsourced; every item is a lead to verify.
- Which of these failure modes and hazards hold for the sense of CSS Flex Box Layout this model covers, and on what evidence? provenance
Regional variation
Recalled without web access and unsourced; every item is a lead to verify.
- Which of these regional variation hold for the sense of CSS Flex Box Layout this model covers, and on what evidence? provenance
Neighbouring kinds and how to tell them apart
Recalled without web access and unsourced; every item is a lead to verify.
- 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? provenance
Classifiers Filled
- Family
- Thing Registry
- Category
- Information and virtual systems
- Entry kind
- thing
- Plane
- INF
- Domain
- INF.KNW
What it is Filled
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.
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
Why it exists Filled
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.
Distinguishing features Filled
- 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.
What robots and AI may and may not do Filled
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.
Only with a human decision
- Changing layouts on a live site that many people depend on.
May
- Write and review flexbox layouts in projects it is authorized to change.
- Explain flexbox properties and how they differ from grid layout.
Moral aspects Filled
- Layout choices decide whether people with disabilities can use a page.
Who is affected
- Users with disabilities
- Web developers
- Site visitors on small screens
Owners Filled
Steward
Nobody owns it; it is defined by a public web standard.
Links to other meta-models Filled
parent
- Q25502958 - registry parent class
What else AI and robots need to interact with it Filled
Identity and identifiers required Filled
- Vercy registry: vr.tr.css-flex-box-layout
- Wikidata: Q17049185 (https://www.wikidata.org/wiki/Q17049185)
Direct properties not applicable Not applicable
- Container display configuration: Specified and computed display values, including flex and inline-flex
- Flex participation: Container-to-item relationship, with anonymous items and nonparticipating children identified
- Axis configuration: flex-direction: row, row-reverse, column or column-reverse; writing-mode and direction
- Wrapping configuration: flex-wrap: nowrap, wrap or wrap-reverse
- Item flexibility: Unitless flex-grow and flex-shrink factors; flex-basis as a CSS size value or keyword
- Sizing constraints: Main and cross sizes, minimum and maximum sizes, intrinsic contributions, aspect ratio and overflow configuration
- Observed layout geometry: Container and item dimensions, gaps and overflow in CSS pixels; observed line count as an integer
- Alignment configuration: Effective justify-content, align-items, align-self, align-content, row-gap, column-gap and auto margins
- Ordering correspondence: Mapping between DOM sequence, order values, visual sequence and observed keyboard navigation
- Rendering conditions: Browser and version, viewport, zoom, fonts, content sample and applicable style rules
Plane INF: no invented physical properties.
Recognition not applicable Not applicable
Not applicable
The layout model is an abstract set of rules whose use cannot be established from rendered appearance alone.
Capabilities and actions required Filled
- 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.
Hazards and failure modes required Filled
- Visual reordering can confuse screen-reader and keyboard users.
- Overflowing items can hide content on small screens.
Standards and interfaces required Filled
- CSS Flexible Box Layout Module Level 1, World Wide Web Consortium.
- Web Content Accessibility Guidelines (WCAG) 2.2, World Wide Web Consortium.
Context of use required Filled
- 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.
Sources Filled
- Wikidata item Q17049185: CSS Flex Box Layout - identity and sense of the item
- Wikipedia: Flexbox - general description of the item
Open questions
- 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?
Machine files
Provenance
thing registry research (pass 2) · unreviewed
Built from: models/things/publications/thing-q17049185/spec.json