CSS: Flexbox

Question 1

What is CSS Flex Box?

Answer 1

CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container.

Question 2

What is the CSS Flex Model?

Answer 2

This model defines how flex items are arranged within a flex container. Every flex container has two axes: the main axis and the cross axis.

Question 3

what is the “flex-direction” Property?

Answer 3

This property sets the direction of the main axis. The default value of flex-direction is row, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left).

Question 4

What is “flex-diretion: row-reverse;”?

Answer 4

This reverses the items in the row.

Question 5

What is “flex-direction: column;”?

Answer 5

This will align the flex items vertically instead of horizontally.

Question 6

What is “flex-direction: column-reverse;”?

Answer 6

This reverses the order of the flex items vertically.

Question 7

What is the “flex-wrap” Property?

Answer 7

This property determines how flex items are wrapped within a flex container to fit the available space. flex-wrap can take three possible values: nowrap, wrap, and wrap-reverse.

Question 8

What is “flex-wrap: nowrap;”?

Answer 8

This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container’s width.

Question 9

What is “flex-wrap: wrap;”?

Answer 9

This property will wrap the items when they exceed the width of their container.

Question 10

What is “flex-wrap: wrap-reverse;”?

Answer 10

This property will wrap flex items in reverse order.

Question 11

What is the “flex-flow” Property?

Answer 11

This property is a shorthand property for flex-direction and flex-wrap. In this example, we set flex-direction to column and flex-wrap to wrap-reverse.

flex-flow: column wrap-reverse;

Question 12

What is the “justify-content” Property?

Answer 12

This property aligns the child elements along the main axis of the flex container.

Question 13

What is “justify-content: flex-start;”?

Answer 13

In this case, the flex items will be aligned to the start of the main axis. This could be horizontal or vertical.

Question 14

What is “justify-content: flex-end;”?

Answer 14

In this case, the flex items are aligned to the end of the main axis, horizontally or vertically.

Question 15

What is “justify-content: center;”?

Answer 15

This centers the flex items along the main axis.

Question 16

What is “justify-content: space-between;”?

Answer 16

This will distribute the elements evenly along the main axis.

Question 17

What is “justify-content: space-around;”?

Answer 17

This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item.

Question 18

What is “justify-content: space-evenly;”?

Answer 18

This will distribute the items evenly along the main axis.

Question 19

What is the “align-items” Property?

Answer 19

This property is used to distribute items along the cross axis. Remember that the cross axis is perpendicular to the main axis.

Question 20

What is “align-items: center;”?

Answer 20

This is used to center the items along the cross axis.

Question 21

What is “align-items: flex-start;”?

Answer 21

This aligns the items to the start of the cross axis.

Question 22

What is “align-items: stretch;”?

Answer 22

This is used to stretch the flex items along the cross axis.