Frontend Web Development Bootcamp - Build a Twitter Clone - Introduction to CSS Flexbox

The video tutorial introduces CSS Flexbox, highlighting its advantages over traditional float-based layouts. It covers the basics of Flexbox, including its properties and how they improve web design by providing easier and more flexible element alignment. The tutorial explains the relationship between Flexbox containers and items, detailing properties like flex direction, flex wrap, justify content, align items, and align content. It also covers individual item properties such as order, align self, flex grow, flex basis, and flex shrink, emphasizing practical examples to enhance understanding.

What is one of the main advantages of using CSS Flexbox over floats?

• It requires more coding effort.

• It is not supported by modern browsers.

• It is less flexible.

• It provides easier and more flexible alignment.

What is the default direction of the main axis in Flexbox?

• Bottom to top

• Left to right

• Right to left

• Top to bottom

Which property is used to define the direction of flex items in a container?

• justify-content

• align-items

• flex-wrap

• flex-direction

What does the 'justify-content' property do in a Flexbox container?

• Wraps items into multiple lines

• Defines the direction of flex items

• Aligns items along the cross axis

• Aligns items along the main axis

Which property allows you to change the order of flex items without altering the HTML?

• flex-basis

• align-self

• flex-grow

• order

What is the purpose of the 'flex-grow' property?

• To allow flex items to grow

• To define the initial size of flex items

• To shrink flex items

• To align items along the cross axis

Which property would you use to align a single flex item differently from others?

• justify-content

• align-self

• align-content

• flex-wrap