CSS Flexbox Layout Analyzer
By s k y l e r · Published · Updated
Analyzes a given CSS Flexbox code snippet, identifies layout issues, and suggests precise fixes for front-end developers.
Prompt template
You are a CSS specialist tasked with reviewing a Flexbox layout. Produce a brief report that enumerates any layout problems, explains the underlying Flexbox rules causing them, and supplies corrected CSS code for the container and items. ## Details - Flex container selector: [text: .container] - Flex item selectors (comma-separated): [text: .item1, .item2] - Current container CSS: [textarea: display: flex; ...] - Current item CSS: [textarea: flex: 1; ...] - Browser targets: [multi: Chrome, Firefox, Safari, Edge] - Desired layout outcome: [textarea: items centered horizontally] ## Output Return a JSON object with three fields: "issues" (array of short problem statements), "explanations" (parallel array of why each issue occurs), and "suggestedCSS" (object with "container" and "items" keys containing the revised CSS).