Register to Better Coder! It's free.
Enjoy the premium features and succeed at every job interview.

25 Flexbox questions that will help you to nail your job interview

Here's a comprehensive list of Flexbox job interview questions along with answers that will help you to nail the job interview, identify knowledge gaps and learn new things about flexbox. Flexbox is a layout mode added in CSS3 to replace hacky float and table layouts. It allows responsive elements within a container to be automatically arranged depending upon screen size.

QUESTION 1:

What is Flexbox?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

Flexbox is a web layout mode in CSS3.

It allows web designers design complex, flexible web layouts that were very difficult to design using CSS before Flexbox was invented.

QUESTION 2:

What are the Flexbox advantages compared to floats?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

Here are some advantages that Flexbox can do:

  • perpendicular centering of items within a parent element
  • making all the children of a container take an equal extent of an available height or width
  • making all columns in a compound layout embrace the same height even if they contain a different amount of content
  • pushing other items to sides
  • centering of items is finally easy
QUESTION 3:

What is a flex container and what is its job?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

A flex container is an element that contains child elemens that are positioned depending on the flex container settings.

Every HTML element can be converted to a flex container. The child elements of such HTML element then become flex items.

The flex container defines how the flex items contained inside the flex container will be positioned and sized.

QUESTION 4:

What is a flex item and what is its job?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

A flex item is a child element of a flex container.

Any HTML element can be converted to a flex item just by making its parent element a flex container.

A flex item can be positioned and sized using flex container settings.

QUESTION 5:

What is a relation between flex container and flex item?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

Zero, one or more flexs item can be embedded in a flex container.

We are saying that?

  • A flex item is a child of a flex container.
  • A flex container is a parent of a flex item(s).
QUESTION 6:

How do you turn a html element into a flex container?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

To turn a HTML element into a flex container, you need to set a CSS display property to flex;

CSS

.d-flex {
  display: flex;
}

HTML
<div class="d-flex"></div>
QUESTION 7:

What does justify-content CSS property do and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The CSS property justify-content defines how the flex items within a flex container will be justified.

The justification is always done on the main axis. So for the horizontal orientation of a flex container the flex-start will justify items to left, flex-end will justify items to right.

  • flex-start - justifies the content to left for horizontal orientation or to top for vertical orientation
  • flex-end - justifies the content to right for horizontal orientation or to bottom for vertical orientation
  • center - justifies the content to center
  • space-between - when there are multiple flex items in a flex container, they will be justified evenly, however, the first and last item won't have space on their outer edges
  • space-around - when there are multiple flex items in a flex container, they will be justified evenly.

CSS


div {
  display: flex;
  justify-content: flex-start;
}

QUESTION 8:

Using Flexbox, how can you align elements to right?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

First you need to define a flex container. You do it by setting a CSS property display to value flex.

The default item flow orientation is horizontal so this is good for our case and we don't need to change it.

To align the item right, we will set a CSS property justify-content to value flex-end.

CSS

div {
  display: flex;
  justify-content: flex-end;
}
QUESTION 9:

What CSS property does the value flex-end belong to and when would you use it?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The value flex-end can be assigned to a CSS property justify-content or align-content.

The combination of justify-content: flex-end will move the flex items to the end of the main axis. You usually use it to align the horizontally flowing items to right or vertically flowing items to bottom.

The combination of align-content: flex-end will move the flex items to the end of the secondary (perpendicular) axis. You usually use it to align horizontally flowing items to bottom or vertically flowing items to right.

CSS

div {
  display: flex;
  justify-content: flex-end;
  align-content: flex-end;
}
QUESTION 10:

Using Flexbox, how do you distribute items equally inside a container?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

To distribute items equally on a line, set styles to justify-content: space-around or justify-content: space-between on the flex container.

To distribute items equally in the column, set styles justify-content: space-around or justify-content: space-between on the flex container. This would however display the items on a line. To display them in a column, you need to change the flex item flow direction to column. In order to do that, set styles flex-direction: column on the flex container.

CSS - Horizontal direction

div {
  display: flex;
  justify-content: space-around;
}

CSS - Vertical direction

div {
  display: flex;
  justify-direction: column;
  justify-content: spacing-around;
}
QUESTION 11:

What is a difference between display: flex and display: inline-flex?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The style display: flex will make the element a flex box container.

The style display: inline-flex will make the element a flex box container and the container will be in-line. Note that this won't make the flex items in-line. The style is applied on the container!

CSS

.container {
  display: flex;
}

.container2 {
  display: inline-flex;
}

CSS - Vertical direction

div {
  display: flex;
  justify-direction: column;
  justify-content: spacing-around;
}
QUESTION 12:

What is a flex-direction property used for and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The property flex-direction defines what will be the direction of the flow of the flex items within a flex container.

The direction can be either horizontal (default) or vertical.

To make the flex items flow horizontally within the flex container, use style flex-direction: row.

To make the flex items flow vertically within the flex container, use style flex-direction: column.

By default, the horizontal flow goes from left to right and the vertical flow from top to bottom. This can be changed.

To make the flex items flow horizontally within the flex container, but in reversed direction, use style flex-direction: row-reverse.

To make the flex items flow vertically within the flex container, but in reversed direction, use style flex-direction: column-reverse.

CSS

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

.container2 {
  display: flex;
  flex-direction: row-reverse;
}

.container3 {
  display: flex;
  flex-direction: column;
}

.container4 {
  display: flex;
  flex-direction: column-reverse;
}
QUESTION 13:

How can you explicitly reorder items in a flexbox container?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The default order of the flex items is defined by their physical position in the flex container HTML element. To reorder the flex items, you can set for each of them the style order: <some_number>. The items are then sorted by the number from the lowest to the greatest.

The following code will make the flex items display in the order A-B-C.

CSS

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

.a {
  order: 1;
}

.b {
  order: 10;
}

.c {
  order: -10;
}

HTML

<div class="container">
  <div class="a">Two</div>
  <div class="b">Three</div>
  <div class="c">One</div>
</div>
QUESTION 14:

How does flex-flow property work and what are its advantages?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The flex-flow property is a shorthand property for flex-direction property and flex-wrap property.

So using this property you can define what will be the flow direction of flex items within a flex container and how the flex items will be wrapped.

Thanks to this property you don't need to write that many characters. And the CSS has smaller footprint which means it can be downloaded faster.

div {
  display: flex;
  flex-flow: row wrap;
}
QUESTION 15:

When would you use flex-flow property and what is it good for?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The flex-flow property will save you some time. As it is a shorthand property for flex-direction property and flex-wrap property, you can use it at any time when you would be defining both of these properties in your CSS ruleset.

The flex-flow property is often used for styling navigations and menus or other lists that can items - product cards or application tiles.

The flex-wrap property defines how the flex container items will be wrapped if they don't fit on one line (or column).

Thanks to this property you don't need to write that many characters. And the CSS has smaller footprint which means it can be downloaded faster.

div {
  display: flex;
  flex-flow: column nowrap;
}
QUESTION 16:

Why would you use flex-wrap CSS property and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The flex-wrap property affects how the flex container items will be wrapped.

It can have the following values:

  • nowrap - this makes all the flex items stay on the one row (for row direction) or column (for column direction)
  • wrap - this makes all the flex items that don't fit on one row (for row direction) or column (for column direction) wrap to another row/column.
  • wrap-reverse - this has the same value as wrap, except the items wrap to the other side.
div {
  display: flex;
  flex-wrap: nowrap;
}
QUESTION 17:

How would you use space-between and what do you know about it?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The space-between is a value of the justify-content property or the align-content property.

The justify-content: space-between makes the flex items to be equally distributed on the main axis in such a way they have the same amount of space between each of them and there is no space on the outer sides of the first and last flex item.

The align-content: space-between makes the flex items to be equally distributed on the cross-axis in such a way they have the same amount of space between each of them and there is no space on the outer sides of the first and last flex item.

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

.container2 {
  display: flex;
  align-content: space-between;
}
QUESTION 18:

What is a cross axis in Flexbox?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

In Flexbox, the cross axis is an axis that is perpendicular to the main axis.

The flex-direction: row defines the direction of the main axis to be horizontal. The cross axis will then be vertical.

The flex-direction: column defines the direction of the main axis to be vertical. The cross axis will then be horizontal.

CSS

The cross axis for the following CSS will be vertical:

div {
  display: flex;
  flex-direction: row;
}

The cross axis for the following CSS will be horizontal:

div {
  display: flex;
  flex-direction: column;
}
QUESTION 19:

What is the CSS property align-items used for and what values can it have?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The align-items defines the alignment of the flex items within the flex-container when the items are wrapped/when there are multiple rows (or columns) on the main axis.

The property can have the following values:

  • stretch - items are stretched to fit the container
  • center - items are positioned at the center of the container
  • flex-start - items are positioned at the beginning of the container
  • flex-end - items are positioned at the end of the container
  • baseline - items are positioned at baseline of the container
CSS
div {
  display: flex;
  align-items: center;
}
QUESTION 20:

How can you make flex container items that flow from left to right to fill all space from top to bottom?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

To make the items flow from left to right, we can use flex-direction:row.

To make the items fill the whole row, we can use align-items:stretch.

To make the content fill the whole container, we can use align-content:stretch.

Note that the flex items shouldn't have explicitly set height.

Also note that the default value for both align-items and align-content is stretch so if you don't define these properties, the solution will work even without them.

CSS

div {
  display: flex;
  flex-direction: row;
  align-content: stretch; 
  align-items: stretch;
}
QUESTION 21:

What does the align-content CSS property do and when do you use it?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

The align-content property sets the alignment of the content on the cross axis within the flex container.

In other words, all the flex items (content) will be taken and will be pushed in some direction as a whole.

CSS

div {
  display: flex;
  flex-direction: row;
  align-content: flex-start; 
}
QUESTION 22:

What CSS rule is used to change the flow of flex container items to "from top to bottom" when text of the document flows from left to right?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

QUESTION 23:

What CSS rule do you use to turn a document element into a flex container?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

QUESTION 24:

When using Flexbox, how do you call an element that manages layout of its children elements?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

QUESTION 25:

When using Flexbox, how do you call an element that is managed by a parent layout-defining element?

Experience Level: Junior
Tags: CSSFlexbox
Question category: Flexbox(35)NEW

Answer

Blog

15 Azure Cloud questions to verify that you understand Azure Network Security Groups

Azure Network Security Groups are important for hardening your virtual network and increasing security of your cloud-hosted application. Check how well you understand them.

Read article

25 Adobe XD questions that will help you to nail your job interview

Here's a comprehensive list of Adobe XD job interview questions along with answers that will help you to nail the job interview, identify knowledge gaps and learn new things about Adobe XD. Adobe XD is a powerful tool for creating prototypes and designing user experience.

Read article

25 Flexbox questions that will help you to nail your job interview

Here's a comprehensive list of Flexbox job interview questions along with answers that will help you to nail the job interview, identify knowledge gaps and learn new things about flexbox. Flexbox is a layout mode added in CSS3 to replace hacky float and table layouts. It allows responsive elements within a container to be automatically arranged depending upon screen size.

Read article

25 Git questions that will help you to nail your job interview

Here's a comprehensive list of Git job interview questions along with answers that will help you to nail the job interview, identify knowledge gaps and learn new things about Git. Git is a modern distributed version control system and is currently the most popular system in use.

Read article