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"}
More Quizzes
CSS Quiz
6317
Jquery
10542
Stella's quiz
15830
Are you a Goblin, Ghoul, or Creature?
15826
2.03: Reasoning 2 - Free Practice Test
201017770
Native American Spirit Animal - Which Are You?
201018427
Which Cinderella Story Character Are You? Free
201017982
Lange CST - Free Surgical Technology Exam Practice
201017499
Which Muppet Are You - Free & Instant Results
201017175
Is My Dog Dying - Free Symptom Self‑Check
201017112
Multiple Personality Disorder Test - Free DID Screening
201018504
Mermaid Name - Free, Instant Results
201017840