Why display:flex was placed for the selector label in the project’s sample? How is it that the labels remain unchanged even though display: flex, align-items: center was used though logically all labels should be aligned in a single row as shown on my web page that i linked above. I hope someone can explain to me whats going on here. The only thing i noticed is when i removed the display:flex code the radio and checkboxes jumbles up. I tried to remove various styling lines to see what is fighting the display: flex on the sample given in the project. space-around: display with equal spacing around them Change the vertical alignment align-items has 5 possible values: flex-start: align to the top of the container. space-between: display with equal spacing between them. center: align at the center of the container. Looks like the labels are all well placed except the label name as you will see in the link. flex-end: align to the right side of the container. To my surprise the name label for some reason is separated from the row.Īlso when i placed display: flex and align-items: center to the whole container of the form i created.

It should looks messy as shown on the webpage that i made. Because logically if i use display:flex everything should align in a single row. I wonder how is it possible that all the labels are arranged beautifully. I noticed display:flex, align-items: center is used on the selector label. In the given project assignment/challenge

Display flex align items center