Flexbox Flashcards
What is the default flex-direction of display: flex; ?
flex-direction: row; which causes elements to line up next to each other in a row of columns first, instead of a column of rows.
What does display: inline-flex; do?
Causes the element’s children to layout in flexbox and the element itself becomes and inline element.
True/False: justify-content works on the cross-axis
False
What CSS property works on the cross-axis alignment of the flex-items?
align-items
If an element has display: flex on it what is it and it’s children called?
Flex container and flex items, respectively.
How do you override align-items for a single flex item?
align-self
How many values of justify-content are there and what are they?
Thirteen:
start, end, flex-start, flex-end, center, baseline, space-evenly, space-around, space-between, stretch, left, right, normal
What’s the difference between space-between, space-around, space-evenly?
Between, puts the space evenly between the flex items. The first and last items are flush against the parent container edges.
Around is the same except the first and last items have a space of half the other distances between them and the parent edge.
Evenly is all spaces are the same.
True/False you can order the flex-items by putting the flex-order property on them.
False. It’s the order: property.
Flex-flow is shorthand for what properties?
Flex-direction and flex-wrap.
flex: is shorthand for what properties?
flex-grow, flex-shrink an flex-basis, in that order.
True/False: flex is a property for the flex-container.
False. flex actually is set on and determines the size of the flex-item.
What is the defaults for flex: ?
0 1 auto
What does flex-grow and flex-shrink do?
Set the flex grow and shrink factor of a flex-item.
What does flex-basis do?
It sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
