flexbox

Question 1

Why is flexbox in CSS?

Answer 1

For a long time floats and positioning were chaotic across browsers.

Flexbox was designed to make it easier to:
**vertically center a block inside its parent

**make all children take up an equal amount of width/height

**make all columns in a layout adopt the same height

Question 2

How do you define a flexbox?

Answer 2

display: flex;

this element will have block scope and it’s children are laid out as flex items.

Question 3

What is the flex model?

Answer 3

Flex items are laid out along two axis:

Main : defined with flex-direction

Cross: runs perpendicular to the main axis

Question 4

What can you specify with flex-direction?

Answer 4

flex-direction: main;

row, row-reverse. [left-to-right, right-to-left]

column, column-reverse

Question 5

What is flex-flow?

Answer 5

shorthand for direction and wrapping.

flex-flow: direction wrap;

wrap is [nowrap, wrap, wrap-reverse]

Question 6

How do you align items and content inside a flexbox?

Answer 6

align-items, and justify-content

Question 7

What are the align-items options?

Answer 7

cross-axis alignment
stretch [default], center, flex-start, flex-end

Question 8

What is the flex property?

Answer 8

Shorthand for flex-grow, flex-shrink, and flex-basis

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Keyword values */
flex: auto;
flex: initial;
flex: none;

Question 9

What does justify-content control?

Answer 9

main-axis alignment

Question 10

what is flex-basis?

Answer 10

controls the initial size of the element before additional space is distributed.

Question 11

what is flex-grow?

Answer 11

controls the amount of available space an element could take up

Question 12

what is flex-shrink?

Answer 12

if items are larger than the container, they shrink according to flex shrink.