A flex container is an element whose child items are laid out using CSS Flexbox. Turning an element into one lets its contents adapt to the browser’s available dimensions instead of keeping a rigid default layout. section 10.5
Use flex containers to arrange related page elements, such as:
- A photo gallery whose figures should sit beside one another rather than flow vertically down the page. section 10.5
- A portfolio container whose cards change from multiple columns on larger screens to two columns on a tablet and one column on a smartphone. section 11.3
- Headers, navigation areas, articles, and course-catalog sections that need organized page layouts. section 11.3 section 13.5
A practical Flexbox instruction
When asking ChatGPT to create a gallery, specify: “Make the gallery a Flexbox container. Center the content and enable it to wrap.” This requests centered items that can move onto additional lines as the browser becomes narrower. section 10.5
Flexbox is especially useful when a page must remain usable across desktop, tablet, and smartphone screen sizes. Test the resulting layout at each size and adjust the generated CSS if needed. section 11.3
