CSS Flexbox Quiz

Test your knowledge of the CSS Flexbox layout module with multiple choice questions and their explanations.

Question 1/15

Which CSS property is used to make flex items wrap to a new line if there is not enough space in the container?

Question 2/15

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

Question 3/15

What is the default value of the justify-content property in CSS Flexbox?

Question 4/15

What's the difference between min-width and flex-basis when applied to a flex item?

Question 5/15

What is the cross axis in CSS Flexbox?

Question 6/15

What is the main axis in CSS Flexbox?

Question 7/15

Which CSS property is used to create a flex container?

Question 8/15

Which CSS property is used to control how much a flex item should shrink if there is not enough space available?

Question 9/15

Which CSS property is used to align multiple lines of flex items along the cross axis?

Question 10/15

Which CSS property is used to set the space between flex items along the main axis?

Question 11/15

Which CSS property is used to set the order of a flex item?

Question 12/15

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

Question 13/15

Which CSS property is used to align a single flex item along the cross axis?

Question 14/15

Which CSS property is used to align flex items along the cross axis?

Question 15/15

Which CSS property is used to control how much a flex item should grow if there is extra space available?
You did not answer any questions correctly.

Your Answers

Question 1/15

Which CSS property is used to make flex items wrap to a new line if there is not enough space in the container?

The flex-wrap property is used to control whether flex items are forced onto one line or can wrap onto multiple lines. Here is an example code:

.container {
  display: flex;
  flex-wrap: wrap;
}

Question 2/15

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

The default value of the flex-shrink property is 1, which means that the item will shrink if necessary to fit within the container.

Example code:

.item {
  flex-shrink: 1;
}

Question 3/15

What is the default value of the justify-content property in CSS Flexbox?

The default value of the justify-content property in CSS Flexbox is flex-start. This means that items are aligned to the left side of the container.

Question 4/15

What's the difference between min-width and flex-basis when applied to a flex item?

The main difference between min-width and flex-basis is that min-width sets a minimum width for an item in a flex container, while flex-basis specifies the initial size of an item before any flex grow or shrink is applied.

min-width is a CSS property that sets the minimum width of an element, which is the smallest size the element can be. This property applies to the content area of the element, and does not include padding, borders, or margins. When used in a flex container, min-width can be used to ensure that an item does not shrink below a certain size.

On the other hand, flex-basis is a CSS property that specifies the initial size of an item in a flex container before any flex grow or shrink is applied. This property can be used to set the default size of an item, and is often used in combination with the flex-grow and flex-shrink properties to create flexible and responsive layouts.

Question 5/15

What is the cross axis in CSS Flexbox?

The cross axis in CSS Flexbox is the vertical axis. It is perpendicular to the main axis and is defined by the align-items property. Here is an example code:

.container {
  display: flex;
  align-items: center;
}

Question 6/15

What is the main axis in CSS Flexbox?

The main axis in CSS Flexbox is the horizontal axis. It is defined by the flex-direction property, which can be set to either row or row-reverse. Here is an example code:

.container {
  display: flex;
  flex-direction: row;
}

Question 7/15

Which CSS property is used to create a flex container?

The display property is used to create a flex container by setting its value to "flex" or "inline-flex". Here is an example code:

.container {
  display: flex;
}

Question 8/15

Which CSS property is used to control how much a flex item should shrink if there is not enough space available?

The flex-shrink property is used to control how much a flex item should shrink if there is not enough space available along the main axis. Here is an example code:

.item {
  flex-shrink: 1;
}

Question 9/15

Which CSS property is used to align multiple lines of flex items along the cross axis?

The align-content property is used to align multiple lines of flex items along the cross axis when there is extra space in the container. Here is an example code:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Question 10/15

Which CSS property is used to set the space between flex items along the main axis?

The justify-content property is used to set the space between flex items along the main axis of the flex container. Here is an example code:

.container {
  display: flex;
  justify-content: space-between;
}

Question 11/15

Which CSS property is used to set the order of a flex item?

The order property is used to set the order of a flex item relative to other flex items inside the same container. Here is an example code:

.item {
  order: 2;
}

Question 12/15

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

The default value of the flex-direction property in CSS is row. This means that items inside a flex container are arranged horizontally from left to right. 

Question 13/15

Which CSS property is used to align a single flex item along the cross axis?

align-self is a CSS property that allows you to control the alignment of a single flex item along the cross-axis, regardless of how the other items are aligned. The align-self property can be used on individual flex items within a flex container to override the default alignment set by the container's align-items property. It accepts the same values as align-items (i.e. center, flex-start, flex-end, baseline, and stretch) to align the item within its own flex line. Here is an example code:

.item {
  align-self: flex-end;
}

This code aligns the individual flex item to the bottom of the cross-axis within its own flex line, regardless of the alignment set by the container.

Question 14/15

Which CSS property is used to align flex items along the cross axis?

The align-items property is used to align flex items along the cross axis of the flex container. Here is an example code:

.container {
  display: flex;
  align-items: center;
}

Question 15/15

Which CSS property is used to control how much a flex item should grow if there is extra space available?

The flex-grow property is used to control how much a flex item should grow if there is extra space available along the main axis. Here is an example code:

.item {
  flex-grow: 1;
}

Take Another Quiz

Advanced CSS Quiz

Advanced CSS Quiz designed to test your knowledge of advanced CSS concepts, including layout, positioning, blending, and responsive design. Start quiz

Agile Methodologies Quiz

Test your understanding of Agile methodologies, including Scrum, Kanban, and Lean. Understand how to use Agile principles to enhance the efficiency and productivity of your software development projects. Start quiz

Basic HTML & CSS Quiz

From basic tags and selectors to layout and positioning, this quiz covers essential topics that every beginner frontend web developer should know. Start quiz

Basic JavaScript Quiz

Test your understanding of the fundamental concepts and syntax of JavaScript, including variables, data types, conditionals, loops, and functions. Start quiz

CSS Box Model Quiz

Identify the correct box model properties for various layout scenarios and determine how changes to these properties affect the appearance of an element. Start quiz

CSS Grid Quiz

Test your knowledge of CSS Grid with this quiz, covering topics such as grid properties, layout creation, and positioning of grid items. Start quiz