CSS Flexbox and Grid

Test your knowledge on CSS Flexbox and Grid with this comprehensive quiz. Assess your understanding of the fundamental concepts, properties, and techniques used in these powerful layout modules.

15 Questions Published

Questions

Question 1 Multiple Choice (Single Answer)

What property is used to define the direction of flex items in a flex container?

  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items
Question 2 Multiple Choice (Single Answer)

What property is used to control the wrapping behavior of flex items when they reach the end of a flex container?

  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items
Question 3 Multiple Choice (Single Answer)

What property is used to distribute space between flex items along the main axis of the flex container?

  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items
Question 4 Multiple Choice (Single Answer)

What property is used to distribute space between flex items along the cross axis of the flex container?

  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items
Question 5 Multiple Choice (Single Answer)

What property is used to specify the initial size of flex items in a flex container?

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex
Question 6 Multiple Choice (Single Answer)

What property is used to control how flex items grow when there is extra space in the flex container?

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex
Question 7 Multiple Choice (Single Answer)

What property is used to control how flex items shrink when there is not enough space in the flex container?

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex
Question 8 Multiple Choice (Single Answer)

What property is used to specify a shorthand for the flex-grow, flex-shrink, and flex-basis properties?

  1. flex-grow
  2. flex-shrink
  3. flex-basis
  4. flex
Question 9 Multiple Choice (Single Answer)

What is the default value of the flex-direction property?

  1. row
  2. column
  3. row-reverse
  4. column-reverse
Question 10 Multiple Choice (Single Answer)

What is the default value of the flex-wrap property?

  1. nowrap
  2. wrap
  3. wrap-reverse
Question 11 Multiple Choice (Single Answer)

What is the default value of the justify-content property?

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around
Question 12 Multiple Choice (Single Answer)

What is the default value of the align-items property?

  1. flex-start
  2. flex-end
  3. center
  4. baseline
  5. stretch
Question 13 Multiple Choice (Single Answer)

What is the default value of the flex-grow property?

  1. 0
  2. 1
  3. 2
  4. 3
Question 14 Multiple Choice (Single Answer)

What is the default value of the flex-shrink property?

  1. 0
  2. 1
  3. 2
  4. 3
Question 15 Multiple Choice (Single Answer)

What is the default value of the flex-basis property?

  1. 0
  2. auto
  3. 100%
  4. 200%