Flexbox

Question 1

What is flexbox’s full name?

Answer 1

The Flexible Box Module

Question 2

Flexbox is a one-dimensional layout model, what does this mean?

Answer 2

It means that flexbox deals with layout in one dimension at a time — either as a row or as a column.

This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.

Question 3

What defines the main axis in flexbox?

Answer 3

The flex-direction property.

flex-direction: row;
The main-axis is horizontal.

flex-direction: column;
The main-axis is vertical.

Question 4

Flex-direction has 4 possible values, what are they?

Answer 4

row
reverse-row
column
reverse-column

Question 5

When first creating a flex container how will the contained flex items behave .

Answer 5

Items display in a row (the flex-direction property’s default is row).

The items start from the start edge of the main axis.

The items do not stretch on the main dimension, but can shrink.

The items will stretch to fill the size of the cross axis.

The flex-basis property is set to auto.

The flex-wrap property is set to nowrap.

Question 6

How do you enable wrapping behaviour with flex-box?

Answer 6

With the flex-wrap property set to wrap

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

Question 7

What is the flex-flow property?

Answer 7

A property that combines the two properties flex-direction and flex-wrap.

Question 8

What three properties can be used on flex-items ?

Answer 8

flex-grow
flex-shrink
flex-basis

Question 9

What is available space in relation to flex-box?

Answer 9

The space in a container that the children of the container don’t take up, leftover space. This available space is important to aligning items and flex-grow / flex-shrink.

Question 10

What is the purpose of flex-basis?

Answer 10

Flex-basis is a property of flex children.
It’s initial value is auto which means it uses the size of the child element as the flex-basis. If the child doesn’t have a size it uses the size of the child elements content as the flex-basis.

If an element has a flex-basis of 100px it will grow and shrink from 100px if rules to grow and shrink are added.

So if flex-wrap is wrap on the flex container and flex-basis is 100px and flex grow is 1 on flex children then the children will grow when they have available space and wrap when they run out of space. They will not shrink below 100px.

Question 11

What is the flex shorthand?

Answer 11

It’s rule that allows you to set flex-grow, flex-shrink, flex-basis all at once!

flex: 1 1 100px;

Question 12

What is the default for flex-grow?

Answer 12

flex grow defaults to 0

Question 13

What is the default for flex-shrink?

Answer 13

flex-shrink defaults to 1

Question 14

If you have a flex column container and give one child of this container a fixed height such as 200px, and the other a flex-grow of 1. Will the fixed height child be 200px high?

Answer 14

No not necessarily as the default for flex-shrink is 1 meaning the fixed element may shrink.
To solve this add flex-shrink:0 to the fixed height child.

Shrinking only happens if all available space is taken up in the container. This means sometimes the fixed element might not shrink depending on the amount of available space.

BAD
In a less flexbox way you could add min:height: 200px to the child element;

Question 15

If you have a flex column container and give one child of this container a fixed height such as 200px, and the other a flex-grow of 1. Will the fixed height child be 200px high?

Answer 15

No not necessarily as the default for flex-shrink is 1 meaning the fixed element may shrink.
To solve this add flex-shrink:0 to the fixed height child.

Shrinking only happens if all available space is taken up in the container. This means sometimes the fixed element might not shrink depending on the amount of available space.

BAD
In a less flexbox way you could add min:height: 200px to the child element;

Question 16

What does flex: number equate to?

Answer 16

It is interpreted as flex: number 1 0;
flex-shrink value is assumed to be 1
flex-basis value is assumed to be 0.

Question 17

How will the children of this container behave and why?

.container{
    display: flex;
    flex-direction: row;
    height: 100vh;
    justify-content: space-around;
    align-items: center;
}

Answer 17

The children elements will be spaced across the main axis because of justify-content: space-around. Normally the children elements would be the full size of the cross axis but the property align-items: center changes this. This makes sense as you can’t center an element that covers the full size of its container.