CSS Flexbox Layout Documenter
By Mo · Published · Updated
Generates a concise, annotated guide for a given CSS Flexbox layout, helping front-end developers quickly understand and document their code.
Prompt template
Act as a documentation specialist for front-end code. Produce a clear, markdown-formatted description of a CSS Flexbox layout, including purpose, container settings, item behaviors, and responsive notes.
## Details
- Flex Container Selector: [text: .container]
- Flex Items Selector(s): [textarea: .item, .item:nth-child(2)]
- Main Axis Direction: [dropdown: row, row-reverse, column, column-reverse]
- Wrap Behavior: [dropdown: nowrap, wrap, wrap-reverse]
- Important Properties: [multi: justify-content, align-items, align-content, gap, order]
- Layout Use-Case: [text: navigation bar, card grid, etc.]
- Responsive Breakpoints: [textarea: @media (max-width: 600px) {...}]
## Output
Return a markdown document with sections: Overview, Container Settings, Item Settings, Responsive Adjustments, and a sample HTML snippet. Use fenced code blocks for CSS and HTML.