Flex Layout Playground
Inspect actual Flexbox sizing in the browser. Replace .your-flex with your project selector and recheck with real content lengths.
1. Container settings
Edit Flex properties.
2. Item properties
Grow/shrink are 0–8, basis 0–600px, and minimum 0–500px. Order changes only visual placement.
f2 · Content
f3 · Aside
3. Actual layout and size
The preview uses your fixed container width. Scroll its pane horizontally on a small screen.
Navigation
Content
Aside
These values are measured from the current browser layout and may differ from the declared CSS values.
f1 · NavigationWidth 0px · height 0pxgrow 1 · shrink 1 · basis 140px · min 100px · order 0
f2 · ContentWidth 0px · height 0pxgrow 2 · shrink 1 · basis 220px · min 160px · order 0
f3 · AsideWidth 0px · height 0pxgrow 1 · shrink 1 · basis 140px · min 100px · order 0
4. HTML and CSS
The output uses fixed container dimensions. Review width, height, labels, and reading order on your site.
CSS
.your-flex {
display: flex;
width: 640px;
height: 180px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}
.your-flex > .item-f1 {
flex: 1 1 140px;
min-width: 100px;
order: 0;
}
.your-flex > .item-f2 {
flex: 2 1 220px;
min-width: 160px;
order: 0;
}
.your-flex > .item-f3 {
flex: 1 1 140px;
min-width: 100px;
order: 0;
}HTML
<div class="your-flex">
<div class="item-f1">Navigation</div>
<div class="item-f2">Content</div>
<div class="item-f3">Aside</div>
</div>Flex Layout Playground
Set a container width and height, direction, wrapping, alignment, and gap. Change each item's grow factor, shrink factor, basis, minimum main-axis size, and visual order. The preview measures the browser's actual rendered width and height, so you can see the effects of content, minimum sizes, and wrapping rather than rely on a simplified arithmetic estimate. Copy or download matching HTML and CSS.
Key features
- Row/column direction, wrapping, alignment, and gap controls
- Per-item grow/shrink/basis, minimum main-axis size, and order
- Actual browser-measured item dimensions
- Overflow warning and horizontally scrollable preview
- Validated HTML/CSS copy and download
How to use
- Start with the example and choose container width, height, and direction.
- Adjust wrapping, alignment, and gap.
- Edit each item's grow, shrink, basis, minimum, and order.
- Inspect measured sizes and any overflow warning in the preview.
- Copy or download HTML/CSS and adapt it in your project.
Use cases
- Compare sidebar and content free-space sharing
- Inspect shrink and min-width limits at a narrow width
- Review the visual effect of wrapping and order
Frequently asked questions
Does grow 2 always make an item twice as wide?
No. Grow distributes available free space; basis and minimum sizes also affect final widths. Check the browser-measured result.
What happens when shrink is zero?
That item does not join negative-free-space shrinking. Other items may shrink more, or the group may overflow the container; the preview warns about overflow.
Which axis gets the minimum size?
Row direction exports min-width; column direction exports min-height. Both constrain the main axis.
Does order change keyboard reading order?
No. CSS order changes visual placement, while DOM and assistive-technology reading order remains the HTML source order. Set meaningful reading order in your source HTML.
Is the configuration autosaved?
No. It stays in this page's memory. Download the generated HTML/CSS to keep the result.
Privacy
Settings stay in the current browser and are not sent to this tool's server API. Downloaded HTML includes your item labels.
Related Tools
CSS Grid PlaygroundCSS Box Shadow GeneratorResponsive Layout AuditorWasm Module InspectorHreflang Matrix CheckerAST Query PlaygroundContainer Build GraphDependency Graph ExplorerSemver Range LabCron Schedule AuditorPatch Review WorkbenchSource Map ExplorerLocalization Catalog AuditorStructured Data ReviewerHTTP Archive AnalyzerWebhook Signature LabProtobuf Schema WorkbenchGraphQL Schema LabAvro Schema EvolutionLocal SQL WorkbenchSchema Form BuilderMesh Repair WorkbenchPipe Network LabRobot Arm Kinematics LabThermal Network LabBeam Response LabGear Train DesignerTolerance Stackup LabSensor Calibration FitPCB Stackup PlannerDigital Filter DesignerNetwork Reachability MapSun Shadow MapGPS Error SimulatorDigital Logic SimulatorAnalog Circuit LabMechanism Linkage LabAnalysis Mesh GeneratorOpenAPI Contract InspectorDatabase Migration PlannerDimensional Equation CheckerTruss Force LabBoolean Minimization LabControl Response LabQueueing Simulation LabGeofence Event SimulatorCoordinate Reference LabSurvey Traverse LabRaster Classification LabChoropleth Design LabMap Print ComposerRaster Reprojection LabElevation Contour MakerTerrain Viewshed LabWatershed DelineatorMap Tile PackagerText File Encoding WorkbenchFilesystem Portability AuditorSBOM License ExplorerFile Signature Auditornpm Lockfile Conflict ResolverSource Secret AuditorOffline Web Package BuilderCertificate Chain InspectorTorrent Metainfo InspectorChunked File PackagerEncrypted File VaultDuplicate File FinderArchive WorkbenchDesign Token ManagerSpacing Token DesignerResponsive Type SystemPackaging Dieline DesignerSVG Icon Sprite PackerRegex Equivalence LabMarkdown Repository AuditorLog Template MinerEmail Template PreviewInternal Link GraphState Machine TesterPetri Net SimulatorGit History VisualizerCurl Request WorkbenchBinary Protocol DesignerHex File EditorBinary Patch WorkbenchFile Signature WorkbenchAPI Mock SandboxSchema Column MapperEvent Log SessionizerER Diagram DesignerTime Series Gap AuditorStratified Data SplitterData Lineage DesignerDecision Tree LabData Anonymization WorkbenchData Expectation RunnerJSON Schema ValidatorBasket Pattern AnalyzerRobots Policy TesterSEO HTML AuditorAccessibility Structure AuditorSyndication Feed WorkbenchIndexNow Payload BuilderCrawl Log AnalyzerCSP Policy WorkbenchSearch Performance AnalyzerCSV Formula Risk AuditorCORS Response SimulatorCache Header LabCookie Policy InspectorWeb Vitals Trace LabSitemap Health AuditorBatch File RenamerFile Manifest VerifierFolder Space MapFolder Difference ReviewerRoute Order OptimizerGeoJSON Map EditorPolygon Overlay LabCartographic Label PlacerSpatial Table JoinGeoJSON Topology AuditorGPX Track AnalyzerTrack Privacy RedactorCSV Table JoinCSV Pivot WorkbenchScientific Data ProfilerTabular Cleaning WorkbenchRecord ReconciliationData Dictionary BuilderCanonical Graph AuditorRedirect Plan TesterHTTP response and ping reference testBrowser and System InformationJSON ↔ YAML ConverterXML ↔ JSON ConverterHTML FormatterJavaScript MinifierMock Data Generator.gitignore GeneratorLicense GeneratorUser-Agent ParserPassword Strength CheckerCode to ImageXML FormatterHTTP Status Code LookupMIME Type LookupJS & SQL String EscapeCSS Gradient GeneratorIndent ConverterNumber Base ConverterUnicode Escape ConverterUnicode InspectorJSON Structure DiffMarkdown Table GeneratorBase64 EncoderJSON FormatterURL EncoderSQL FormatterCron Expression GeneratorRegex TesterUUID GeneratorHash GeneratorTimestamp ConverterJWT DecoderHTML Entity ConverterMarkdown PreviewCSS MinifierMeta Tag GeneratorJSON ↔ CSVCase ConverterImage to Base64
Comments & questions