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.

Creating responsive checkbox groups

Creating responsive checkbox groups - CSS Flexbox Tutorial

From the course: Building Responsive Forms with Flexbox

Start my 1-month free trial

Creating responsive checkbox groups

“

- One of the trickier aspects of creating responsive forms is dealing with groups of checkboxes and radio buttons. In this exercise, we're going to use Flexbox to create responsive columns of checkboxes and then control their alignment. To do that I'll be working with the forms.htm file found in the 02-05 directory. And before we can write our selectors, let's go down and take a look at the structure of these checkbox groups that we want to control. So if I scroll down a little bit in this section for sessions, about line 192 or so, we have a section of skills. So we have an unordered list with a class of form-skills. Inside that we have individual list items that have a checkbox along with a label for that checkbox. So you can see each one of these has a different skill, but it's a repeating structure. So we have a list item that contains both the input of checkbox and the label. Notice the input is first, label is second. So our first one is form-skills. We have quite a few of…

Contents