CSS for Web Development

0% completed

Previous
Next
Quiz
Question 1
In a flex container with flex-direction: row, which statement is true?
A
The main axis runs vertically and the cross axis runs horizontally.
B
Both the main axis and cross axis run horizontally.
C
The main axis runs horizontally, and the cross axis runs vertically.
D
The main axis runs diagonally.
Question 2
What does the following CSS rule do inside a flex container?
.container {
  display: flex;
  justify-content: space-between;
}
A
It centers the flex items along the cross axis.
B
It places equal space between flex items along the main axis, with the first item at the start and the last item at the end.
C
It centers flex items in both directions.
D
It makes all items take equal width.
Question 3
What is the effect of the following CSS on a flex container?
.container {
  display: flex;
  align-items: center;
}
A
Items are centered along the main axis.
B
Items are centered vertically if the flex-direction is row, or horizontally if flex-direction is column.
C
Items will take equal height.
D
It distributes the remaining space evenly between items.
Question 4
What effect does setting flex: 0 0 auto; on a flex item have?
A
The item will grow to fill available space.
B
The item will shrink to fit the container.
C
The item will disappear.
D
The item keeps its original size (flex-basis), ignoring available extra space or constraints.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next