Join James Williamson for an in-depth discussion in this video Controlling section spacing, part of Building Responsive Forms with Flexbox.
- View Offline
- Controlling the spacing between flex items that are…set to wrap can be a little tricky if the items…are flexible rather than having a fixed width.…Our sections, for example,…have no space between them because each has…a flex row property of one…and that tells them to take up all of the remaining…available space,…so really they're just doing what they're being…told to do.…Now we need to add a little bit of space in between them…that will disappear when the layout changes to…a single column.…Using Flexbox that's actually trickier than you might think.…So to show you how this is going to work,…I've got the forms.htm file open from the 02-07 directory.…
Now some of you have probably already thought about…"Hey what if we just use a margin?"…and that's exactly what we're going to do.…We're going to use a margin to do this…but it's a little trickier than you might think.…Now Flexbox essentially ignores margins.…Now what I mean by that is it allows them…between elements but it ignores them in terms…of the overall width of the element.…
In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.