The Art of Doing - Web Development for Beginners - Flexbox Basics

The video tutorial introduces CSS layout systems, focusing on flexbox. It covers setting up HTML for flexbox, styling containers and items, and applying flexbox properties. The tutorial explains the main and cross axis concepts and demonstrates creating both row and column-based layouts using flexbox.

What is the primary focus of the video tutorial series?

• JavaScript functions

• HTML forms

• CSS layout systems

• Python programming

What is the purpose of giving an ID to the first Flexbox item?

• To duplicate it

• To make it invisible

• To delete it

• To style it uniquely

What property is used to apply Flexbox to a container?

• display: block

• display: inline

• display: flex

• display: grid

Which property aligns items along the main axis in Flexbox?

• justify-content

• flex-direction

• align-content

• align-items

What is the default alignment for items in a Flexbox container?

• Grid

• Inline

• Row

• Column

How can you change the layout from row to column in Flexbox?

• Use justify-content: space-between

• Use flex-direction: column

• Use display: block

• Use align-items: center

What does the justify-content: space-between property do?

• Aligns items to the start

• Distributes items with equal space between them

• Aligns items to the end

• Centers items vertically

Which property is used to align items along the cross axis?

• justify-content

• align-items

• flex-wrap

• flex-basis

What happens when you set align-items to center in a column layout?

• Items are centered horizontally

• Items are centered vertically

• Items are aligned to the top

• Items are aligned to the bottom

What is the effect of setting flex-direction to column?

• Items are duplicated

• Items are aligned in a row

• Items are stacked vertically

• Items are hidden