Flexbox and Multi-Column Layout Flashcards
The elements inside a flex container are called:
flex items
Everything in flexbox is relative to what two axes?
main axis and cross axis
If items in a flex container are not wrapping, what declaration can fix that?
flex-wrap: wrap;
What will move the first flex item to the left, the last one to the right, then evenly distribute the space in between?
justify-content: space-between;
The value needed to make an element a flex container is:
display: _____;
flex
What property determines how much the flex items expand relative to the other flex items?
flex-grow
What will vertically align a flex item?
align-self: center;
What does a number value for flex-grow represent?
ratio of free space taken by the flex items
The _____ property changes the order of a flex item on the flex line.
order
What property sets the number of columns?
column-count
To define the space between columns, we need to use the _____ property.
column-gap
What property defines borders between each column?
column-rule
The ‘column-rule’ property is shorthand for what properties?
column-rule-width, column-rule-style, column-rule-color
The ‘columns’ property is the shorthand for what properties?
column-width and column-count
What will span an element across every column?
column-span: all;