Flexbox Properties

Question 1

What’s the purpose of flexbox?

Answer 1

allow items to best fill the space available or prevent overflow
“direction-agnostic” aka has no particular base of direction

Question 2

Flexbox Layout

Answer 2

Main axis: primary axis where items are laid out, not always horizontal, depends on flex direction
Main size: flex item’s width or height
Cross-axis: axis perpendicular to the main axis
cross-size: flex item’s width or height in the cross direction

Question 3

display: flex;

Answer 3

defines a flex container

Question 4

flex-direction:

Answer 4

establishes the main-axis and defines the direction items are placed in the container
flex-direction: row –> default, left to right in ltr and right to left in rtl
flex-direction: row-reverse –> right to left in ltr and left to right in rtl
flex-direction: column –> same as row but top to bottom
flex-direction: column-reverse –> same as row reverse but bottom to top

Question 5

flex-wrap:

Answer 5

by default, flex items will try to fit in one line
flex-wrap: nowrap –> default
flex-wrap: wrap –> items will wrap onto multiple lines
flex-wrap: wrap-reverse –> flex items will wrap onto multiple lines from bottom to top

Question 6

flex-flow:

Answer 6

shorthand for both flex-direction & flex-wrap

Question 7

justify-content:

Answer 7

defines alignment along the main axis
justify-content: flex-start;
justify-content: flex-end;
justify-content: flex-center;
there are more but these are "safest" for browsers

Question 8

align-items

Answer 8

defines how flex items are laid out along the cross axis
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;

Question 9

align-content:

Answer 9

aligns a flex container’s lines within when there is extra space in the cross-axis

Question 10

gap, row-gap, column-gap:

Answer 10

gap property controls the space between flex items
only applies to the spacing BETWEEN items, not the outer edges
not exclusively for flexbox