{{ summaryHeading }}
{{ summaryValue }}

{{ summaryLine }}

Flow{{ computation.ok ? direction : '—' }} Wrap{{ computation.ok ? wrap : '—' }} Rules{{ computation.ok ? values.total_declaration_count : '—' }}
A non-empty container selector without declaration-breaking braces or semicolons.
{{ issueFor('selector').message }}
Finite value from 0 to 999.
{{ issueFor('gap_value').message }}
Sample child count used by the preview and starter HTML.
{{ issueFor('item_count').message }}
Off is neutral. Turn it on to emit a second rule with a flex shorthand.
{{ include_child_rule ? 'Enabled' : 'Disabled' }} 
{{ values.css_text }}
Layout Preview

The chart renderer is unavailable. Exact declaration roles remain available in Property Ledger.

ScopePropertyValueLayout roleImplementation noteCopy
{{ row.scope }}{{ row.property }}{{ row.value }}{{ row.role }}{{ row.note }}
{{ values.html_text }}
Tags: Devtools
CSS Grid Generator Build responsive or fixed CSS Grid rules with auto-fit and auto-fill options, fit estimates, plus narrow-container safeguards and starter HTML.
CSS Gradient Generator Build CSS gradients using linear, radial or conic geometry with exact color stops and optional modern interpolation spaces for copy-ready stylesheets.
CSS Box Shadow Generator Compose ordered CSS box-shadow layers and compare blur and spread in a live preview before copying a stylesheet rule or reusable design token.
CSS Minifier Minify CSS locally with conservative rewrite profiles and byte-savings metrics, while preserving protected comments and flagging release risks.

When a container gains or loses space, its children can grow, shrink, move apart, align to an edge, or wrap onto another line. CSS Flexbox coordinates those choices along one main direction. It works well for navigation, toolbars, button groups, card footers, form actions, chips, and vertical stacks where content length is less predictable than the layout around it.

The main axis comes from flex-direction. A row normally places items across the inline direction; a column places them down the block direction. justify-content distributes items along that main axis, while align-items positions items across it. Changing row to column therefore changes which physical direction each alignment property affects.

Flex item
A direct child of a flex container.
Flex line
One row or column of flex items. Wrapping can create several lines.
Unused space
Room left on a line after item base sizes, margins, and gaps are considered. Positive space can be distributed; a shortage can trigger shrinking or overflow.

Wrapping changes more than line breaks. align-content distributes multiple flex lines across the cross axis and has no visible effect on a single-line container. The gap property inserts consistent space between adjacent items and between wrapped lines without adding outer margins.

Layout questionUsually clearerReason
How should one sequence share a row or column?FlexboxThe main axis drives sizing, spacing, and alignment.
How should rows and columns line up together?GridExplicit tracks control both dimensions.
Should extra items wrap naturally?FlexboxItems can form new lines while keeping one-dimensional flow.
Should a card occupy named cells or span tracks?GridTwo-dimensional placement is part of the design.

Intrinsic content still sets limits. Long URLs, form controls, images, and nested components may resist shrinking. In a row layout, min-width: 0 on a flex item often allows long content to shrink inside the line, but the content may still need wrapping or overflow rules.

Reverse directions alter visual flow without rewriting document order. Keyboard focus, screen-reader reading, and copied text continue to follow the source, so reverse values should not be used to repair logically misordered markup.

How to Use This Tool:

Build the container rule around the intended main axis, then add child sizing only if the same rule should apply to every matched child.

  1. Enter the CSS selector for the container. Braces, semicolons, control characters, and selectors longer than 120 characters are rejected.
  2. Choose Display mode, Direction, and Wrapping. Confirm that the summary names the expected horizontal, vertical, or reverse main axis.
  3. Set Main-axis alignment, Cross-axis item alignment, Wrapped-line alignment, and the gap. If wrapping is off, remember that wrapped-line alignment cannot affect a single line.
  4. Adjust Preview items from 2 to 12 to exercise the likely child count. This changes the preview and starter HTML, not the container declarations.
  5. Enable Include direct-child sizing rule only when a shared flex shorthand is appropriate. Set grow and shrink as whole factors from 0 to 12, choose a valid basis, and add min-width: 0 when long row content must shrink.
  6. Compare Flex CSS with Layout Preview and Property Ledger, then test the copied rule with real content at narrow and wide container sizes.

Interpreting Results:

The generated CSS is the reusable artifact. The preview uses sample labels and sizes, so it is useful for comparing direction, alignment, wrapping, and gap choices but cannot predict every intrinsic size in the final component.

  • If items move on the unexpected axis, check flex-direction before changing alignment.
  • If align-content appears inactive, confirm that wrapping is enabled and that more than one flex line exists.
  • If long children overflow a row, test the optional min-width: 0 rule and appropriate wrapping on the content itself.
  • If a reverse direction looks correct visually, verify that source and focus order still communicate the intended sequence.

Technical Details:

A flex formatting context lays out direct children in one or more flex lines. Direction establishes the main axis and its start and end. Wrapping controls line formation. Main-axis alignment distributes leftover space within each line, while cross-axis properties align items within lines and lines within the container.

Rule Core:

DeclarationGovernsImportant boundary
displayBlock-level flex or inline-level inline-flex containerOnly direct children become flex items.
flex-directionMain-axis orientation and optional reversalReverse values do not change source order.
flex-wrapSingle line, multiple lines, or reversed cross-axis stackingnowrap leaves align-content without a visible multi-line effect.
justify-contentItem-group distribution on the main axisIts physical direction changes with flex-direction and writing mode.
align-itemsItem alignment on the cross axis within each lineIntrinsic size and item overrides can change the visible result.
align-contentDistribution of flex lines on the cross axisRequires a multi-line container with relevant cross-axis space.
gapSpacing between items and linesPercentage gaps can be surprising in intrinsically sized containers.

Child-sizing rule:

The optional child rule emits flex: grow shrink basis. Grow controls each matched child's relative share of positive unused space. Shrink controls its relative reduction when the line is too small. Basis supplies the starting main size before unused space is distributed. Supported basis values include auto, content-sizing keywords, zero, and non-negative lengths in the accepted CSS units.

A rule such as flex: 1 1 16rem lets matched children start near 16rem, grow when room remains, and shrink when necessary. Adding min-width: 0 can remove the default content-based floor in a row, but it does not wrap an unbreakable string by itself.

The generated rule always includes the seven container declarations shown above. The child rule is separate and optional. Starter HTML follows simple class or ID selectors when possible; more complex selectors receive a generic wrapper, so the final markup must be checked against the actual selector relationship.

References: