Container Properties
Item Properties
Live Preview
CSS Code
Enter your content in the input area, click the action button, and view the result. All processing is done locally in your browser.
Container Properties：display、flex-direction、flex-wrap、justify-content、align-items、align-content、gap。Item Properties：flex-grow、flex-shrink、flex-basis、align-self、order。
Yes. The generated CSS includes all configured Flex properties. Copy and paste directly into your project.
No. All layout preview and code generation runs locally in your browser.
Flexbox is one-dimensional (row or column), ideal for component layout. Grid is two-dimensional (rows and columns), ideal for page layout. They work well together.