From the course: Building Responsive Forms with Flexbox

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Controlling section spacing

Controlling section spacing - CSS Flexbox Tutorial

From the course: Building Responsive Forms with Flexbox

Start my 1-month free trial

Controlling section spacing

“

- 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…

Contents