Join James Williamson for an in-depth discussion in this video Flexbox basics, part of Building Responsive Forms with Flexbox.
- View Offline
- [Voiceover] Before we begin building our forms,…I want to take just a moment to give you an overview…of how Flexbox works.…Controlling the layout of web pages…has always been a little tricky.…Typically, we use things like floats to move elements…to the right or to the left of each other,…or use basic positioning models like absolute positioning.…We've been using these tools for so long…that most of us have gotten pretty good at building…complex layouts with them.…But if you think about it, these are not very…sophisticated layout tools.…In reality, even the simplest layout tasks,…such as building forms, are difficult to control.…
That's where Flexbox comes in.…Flexbox is just one of several new CSS layout modules…that are designed to finally make crafting CSS layouts…easier and more powerful.…Flexbox allows you to control the alignment, spacing,…and sizing of elements relative to their parents.…This means that Flexbox is ideally suited for…controlling elements along a single access…or handling complex element alignment for UI components,…
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.