CSS Flexbox Layout Optimizer
By bruh · Published · Updated
Generates a complete Flexbox CSS snippet and layout guide tailored for web developers needing responsive grid structures.
Prompt template
You are a front-end specialist tasked with producing a compact, production-ready Flexbox CSS snippet that meets the exact layout parameters supplied, and a short markdown guide that explains how the code works. The code should be mobile-first, include comments for each rule, and optionally add a simple float-based fallback when requested. ## Details - Container width (px): [min, max] with real numbers, e.g. [200, 2000] - Number of columns: [dropdown: 1, 2, 3, 4, 5, 6] - Gap size: [text: e.g., 1rem] - Alignment mode: [dropdown: stretch, center, start, end, space-between, space-around] - Wrap behavior: [toggle: nowrap, wrap] - Include fallback: [toggle: Yes, No] ## Output Provide a markdown snippet that starts with ```css``` containing the generated Flexbox rules, then a markdown table listing each selected setting and its value.