Font size
WorksheetsCss flexbox
Total questions: 20
Worksheet time: 20mins
How can you align items along the cross-axis in a Flexbox container?
align-items: center;
justify-items: center;
vertical-align: center;
align-content: center;
What property is used to create space between Flexbox items along the main axis?
margin
padding
gap
space-between
How do you make a Flexbox container wrap its items to the next line if they don't fit in the current row?
flex-wrap: wrap;
wrap-items: true;
flex-direction: column;
flex-flow: row wrap;
What does the justify-content property control in a Flexbox container?
Cross-axis alignment of items.
Main-axis alignment of items.
Spacing between items.
Item ordering.
How can you make an individual Flexbox item take up all available space along the main axis?
flex: 1;
grow: 1;
flex-grow: 1;
size: fill;
Which property is used to align a single Flexbox item within the container?
align-self
item-align
self-align
flex-align
In Flexbox, what does the order property control?
The order of the container in the document flow.
The order of Flexbox items within the container.
The order of Flexbox lines within a multi-line container.
The order of the items along the cross-axis.
What is the default value of the flex-direction property in a Flexbox container?
row
column
row-reverse
column-reverse
What is the purpose of the flex-shrink property in Flexbox?
It determines the initial size of a flex container.
It controls the ability of a flex item to shrink if necessary.
It sets the minimum size of a flex container.
It defines the maximum size of a flex item.
How can you center both horizontally and vertically in a Flexbox container?
align-items: center; justify-content: center;
center: true;
flex-align: center; flex-justify: center;
position: center;
How can you make a Flexbox item take up a specific fraction of the available space along the main axis?
size: 50%;
flex: 1;
grow: 0.5;
flex-basis: 50%;
How can you reverse the order of Flexbox items along the main axis?
order: reverse;
flex-order: reverse;
flex-direction: row-reverse;
order-reverse: true;
In a Flexbox container with flex-direction: column;, how can you align items along the main axis?
justify-items: center;
align-content: center;
justify-content: center;
align-items: center;
The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.
True
False
The align-items property is used to align items along the main axis in a Flexbox container.
True
False
The align-self property is used to align the entire Flexbox container.
True
False
What css rule creates a flexbox container?
flex: box
display: flexbox
flex: container
display: flex
What are the two options for flex-direction?
row
vertical
column
horizontal
What does the flex-grow property control in Flexbox?
It sets the maximum size of a Flexbox item.
It specifies whether Flexbox items should wrap to the next line.
It controls the ability of a Flexbox item to grow to fill available space.
It adjusts the spacing between Flexbox items.
How can you make a Flexbox container display its items from bottom to top along the main axis?
flex-direction: bottom;
flex-direction: reverse;
flex-direction: column-reverse;
flex-flow: column wrap-reverse;
