Enhancing Responsiveness With Flexbox
summary
Shows concrete fixes: adds Flexbox as progressive enhancement over floats and percent widths to stop select text getting cut off and to make a job form and Booking.com customer‑service form auto-switch to a 2×2 layout without media queries. Demonstrates a real rule set—flex-basis: 40%; flex-grow: 1; flex-shrink: 0—that forces two-per-row wrapping and full‑width stretching, uses Flex to align map info windows and article headers, and uses margin-left: auto to push items and order to visually reorder content; examples work with fallbacks for older browsers.
AI-written summary · about
chapters (20)
- 0:00Start
- 5:42Use the flex property instead
- 7:27Smarter sizing
- 8:53All of the CSS for those 2 layouts
- 9:39Layout change without media query
- 10:58Defining the flex property
- 12:10Breaking down the flex property
- 14:12Taking advantage of variable space
- 18:22Flexbox with float fallback
- 18:46Improved wrapping in RWD layout
- 21:11Spacing with table-layout:fixed
- 21:39Starter centered nav bar
- 26:11Demo: full-height stacked icons
- 28:31Fallback alignment options
- 30:04Remember this?
- 30:49order integer to specify flow order of flex items
- 31:09Use order property to move logo
- 33:12Demo: moving a photo on mobile
- 34:15Turn off flexbox in desktop styles
- 36:38Flexbox is not
