CSS

Question 1

What are the options for flex-direction?

Answer 1

.container {
flex-direction: row | row-reverse | | column | column-reverse;
}

Question 2

What are the options for flex-wrap?

Answer 2

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

Question 3

What does Justify-content do and what are the options?

Answer 3

Justify-content: defines the alignment along the main axis (usually x-axis).

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe;
}

Question 4

What does align-items do and what are the options?

Answer 4

align-items defines the default behavior for how flex items are laid out along the cross axis on the current line (usually y-axis alignment).

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe;
}

Question 5

What does align-content do and what are the options?

Answer 5

align-content aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. NOTE: only takes effect on multi-line flex containers.

.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe;
}

Question 6

What is the gap property?

Answer 6

The gap property explicitly controls the space between flex items. It applies that spacing only between items (i.e. not on either side).

gap: 10px;
gap: 10px 20px; // row-column gap
row-gap: 10px;
column-gap: 20px;

Question 7

What does flex-grow do?

Answer 7

Flex-grow defines the ability for a flex item to grow if necessary. It dictates what amount of the available space inside the flex container the item should take.

E.g. if all items have flex-grow: 1, the remaining space will be distributed equally. If one of the children has a value of 2, that child will try to take up twice as much of the space as the others.

.item {
flex-grow: 1; // default 0
}