10 Questions
Which layout method is being used in the first example?
Flexbox
What happens when the flex container becomes too narrow in the first example?
Items wrap onto a new row
Why do the wrapped items not line up underneath the items above in the first example?
The items have different flex properties
What is the flex-basis value set to in the first example?
150 pixels
Which property is set to wrap in the first example?
flex-wrap
Which layout method is being used in the first example?
Flexbox
What is the flex-basis value set to in the first example?
150 pixels
What happens when the space in the container becomes too narrow in the first example?
Items will wrap onto a new row
Which property is set to wrap in the first example?
Flex-wrap
Why do the wrapped items not line up underneath the items above in the first example?
Because they are in a different flex line
Study Notes
Flexbox Layout Example
- The layout method used in the first example is Flexbox.
- When the flex container becomes too narrow, the items wrap to a new line.
- The wrapped items do not line up underneath the items above because the flex basis is set to auto, which allows the items to take up the remaining space.
- The flex-basis value is set to auto in the first example.
- The property set to wrap in the first example is flex-wrap.
- When the space in the container becomes too narrow, the items wrap to a new line.
Test your knowledge on the relationship of CSS grid layout with other layout methods. Learn about the differences between one- and two-dimensional layouts and how flexbox is used in this context.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
