Flexbox Quiz
Mastering Flexbox: Test Your Skills
Welcome to the Flexbox Quiz! This quiz is designed to help you assess your understanding of Flexbox—a powerful layout tool in CSS that allows you to create responsive designs with ease.
Test your knowledge with questions that cover:
- Flexbox properties and their fun
ctions - Understanding the flex container and its items
- Common pitfalls and best practices
How do you initialize flexbox
Display: flexbox;
Display: flex;
Flex: default;
Flex: auto;
What is the default orientation within a flex container?
Diagonal
Horizontal
Vertical
Perpendicular
In shortened flex-property: 1 0 auto; what is the 0 referring to?
Flex-grow
Flex-shrink
Flex-basis
Width
Order
What is the default for flex-flow
Row nowrap
Row wrap
Row no-wrap
Auto
100%
Which statement is invalid?
Justify-content: space-between;
Align-items: space-between;
Align-self: auto;
Display: inline-flex;
Align-content: space-between;
If these two statements are applied on a flex item, what will be its width? width: 500px; flex-basis: 250px;
500px
250px
100%
Auto
Width = invalid
If these three statements are applied on a flex item, what will be its width? width: 500px; flex-basis: 250px; min-width: 750px;
750px
250px
500px
Auto
100%
If all these statements are applied on a flex item, what will be its width? width: 500px; flex-basis: 1250px; min-width: 750px; flex-shrink: 0;
250px
500px
750px
1250px
Auto
100%
Flex-flow is shorthand for?
Flex-direction flex-wrap
Flex-direction justify-content
Flex-wrap align-items
Flex-wrap order
Flex container properties
Flex-direction
Flex-wrap
Justify-content
Align-items
Align-content
Align-self
Order
Flex-basis
Flex-grow
Flex-shrink
Flex
Flex item properties
Flex-direction
Flex-wrap
Justify-content
Align-items
Align-content
Align-self
Order
Flex-basis
Flex-grow
Flex-shrink
Flex
The cross axis runs _____ to the main axis
Perpendicular
Parallel
The main axis on flex-direction: column-reverse runs in which direction?
Top-bottom
Bottom-top
Left-right
Right-left
Justify-content aligns elements along which axis
Main
Cross
Align-items aligns elements along which axis
Main
Cross
{"name":"Flexbox Quiz", "url":"https://www.quiz-maker.com/QPREVIEW","txt":"Welcome to the Flexbox Quiz! This quiz is designed to help you assess your understanding of Flexbox—a powerful layout tool in CSS that allows you to create responsive designs with ease.Test your knowledge with questions that cover:Flexbox properties and their functionsUnderstanding the flex container and its itemsCommon pitfalls and best practices","img":"https:/images/course2.png"}