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

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.

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

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.

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.

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).

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>

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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>

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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; 
}