Flexbox

Question 1

Which CSS property defines flex block container?

Answer 1

display: flex;

Question 2

Which CSS property defines flex inline container?

Answer 2

display: inline-flex;

Question 3

Which CSS property establishes the main-axis of the flex container?

Answer 3

flex-direction

Question 4

Which axis defines the direction that flex items are placed in the flex container?

Answer 4

main-axis

Question 5

How can you set the main-axis of flex container from left to right in ltr?

Answer 5

flex-direction: row;

Question 6

How can you set the main-axis of flex container from top to bottom?

Answer 6

flex-direction: column;

Question 7

How can you set the main-axis of flex container from bottom to top in reverse order?

Answer 7

flex-direction: column-reverse;

Question 8

How can you set the main-axis of flex container from right to left in rtl?

Answer 8

flex-direction: row;

Question 9

How can you set the main-axis of flex container from right to left in ltr?

Answer 9

flex-direction: row-reverse;

Question 10

How can you set the main-axis of flex container from left to right in rtl?

Answer 10

flex-direction: row-reverse;

Question 11

What is the default wrapping behaviour of flex container?

Answer 11

nowrap

Question 12

Which CSS property changes the wrapping behaviour of flex container?

Answer 12

flex-wrap

Question 13

What are the possible values of flex-wrap property?

Answer 13

nowrap | wrap | wrap-reverse

Question 14

How can you tell flex container that you want flex items will wrap onto multiple lines, from top to bottom?

Answer 14

flex-wrap: wrap;

Question 15

How can you tell flex container that you want flex items will wrap onto multiple lines, from bottom to top?

Answer 15

flex-wrap: wrap-reverse;

Question 16

How can you tell flex container that flex items should not wrap?

Answer 16

flex-wrap: nowrap;

Question 17

Shorthand for the ‘flex-direction’ and ‘flex-wrap’ properties.

Answer 17

flex-flow

Question 18

Default values for ‘flex-flow’ property.

Answer 18

flex-flow: row nowrap;

Question 19

Which property defines the alignment along the main axis of flex container?

Answer 19

justify-content

Question 20

Default value for justify-content property of flex container.

Answer 20

justify-content: flex-start;

Question 21

Pack the flex items toward the start of the flex-direction

Answer 21

justify-content: flex-start;

Question 22

Pack the flex items toward the end of the flex-direction

Answer 22

justify-content: flex-end;

Question 23

Center flex items along the main-axis

Answer 23

justify-content: center;

Question 24

Distribute flex-items evenly along the main-axis; so that first item is on the start line, last item on the end line

Answer 24

justify-content: space-between;

Question 25

Distribute flex-items along the main-axis, so that the spacing between any two items, and the space to the edges is equal.

Answer 25

justify-content: space-evenly;

Question 26

Distribute flex-items along the main-axis, so that all the items have equal space on both sides.

Answer 26

justify-content: space-around;

Question 27

Which CSS property defines the default behavior for how flex items are laid out along the cross axis?

Answer 27

align-items

Question 28

Default value for align-items property of flexbox.

Answer 28

stretch

Question 29

Place flex items at the start of the cross axis.

Answer 29

align-items: flex-start;

Question 30

Place flex items at the end of the cross axis.

Answer 30

align-items: flex-end;

Question 31

Center flex items in the cross-axis.

Answer 31

align-items: center;

Question 32

Align flex items as their baselines.

Answer 32

align-items: baseline;

Question 33

Which CSS property is used to manage the positioning of wrapped flex items?

Answer 33

align-content

Question 34

Which property is used to align individual items of flex-container

Answer 34

align-self

Question 35

What is the default order of flex items?

Answer 35

0

Question 36

Which property is used to change the flex item order?

Answer 36

order

Question 37

Which property triggers the ability for a flex item to grow if necessary.

Answer 37

flex-grow: #

Question 38

What unit is used by flex-grow property?

Answer 38

It has no units, it defines a proportion. It dictates what amount of the available space inside the flex container the item should take up.

Question 39

If all items have flex-grow set to 1, how will the remaining space in the container be distributed?

Answer 39

equally to all children.

Question 40

opposite property of flex-grow

Answer 40

flex-shrink

Question 41

which rule doesn’t allow items to shrink

Answer 41

flex-wrap: wrap;

Question 42

What flex-shrink value establish

Answer 42

How fast the item will shrink, for example flex-shrink: 5 will shrink the item 5 times faster than flex-shrink: 1, 0 value do not shrink at all

Question 43

What is the default flex-basis

Answer 43

auto

Question 44

What flex-basis specifies?

Answer 44

actual length of the specific item depending on the flex-direction of the container

Question 45

If the width and height of a specific flex item is defined, what is the behavior of flex-basis?

Answer 45

flex-basis overrides one of them depending on the flex-direction of the container.

Question 46

What is teh shorthand property for all of the following properties: flex-grow, flex-shrink, flex-basis

Answer 46

flex; 0 1 auto

precise syntax is:

flex: none | [ ? || ]