Modern HTML and CSS from the Beginning (Including Sass) - Flex Basics

This video tutorial introduces the basics of using Flexbox in CSS for web design. It covers setting up a flex container and items, using flex direction to align items horizontally or vertically, and adjusting item sizes with flex basis. The tutorial also explains how to use flex wrap and flow properties to manage item layout. The instructor demonstrates these concepts through practical examples, making it easier to understand the advantages of Flexbox over traditional float-based layouts.

What is the purpose of giving an ID to a division in HTML?

• To apply specific styles to it

• To change its color

• To increase its size

• To make it invisible

What happens when you set the display property to 'flex' on a container?

• The items are aligned horizontally

• The items are aligned vertically

• The items disappear

• The items change color

How can you reverse the order of flex items in a row?

• By using flex-basis

• By using row-reverse

• By using flex-wrap: wrap

• By using flex-direction: column

What does setting 'flex: 1' on a flex item do?

• It changes the item's color

• It makes the item invisible

• It gives the item a fixed width

• It makes the item take up equal space

Which property would you use to allow flex items to wrap onto the next line?

• flex-basis

• flex-wrap

• flex-flow

• flex-direction

What is the effect of setting 'flex: 2' on the first child of a flex container?

• The first child becomes twice as large as others

• The first child becomes invisible

• The first child moves to the end

• The first child changes color

Which property is a shorthand for setting both flex-direction and flex-wrap?

• flex-basis

• flex-flow

• flex-grow

• flex-shrink