CSS3 FlexBox Flashcards
Define the ‘flex-flow’ attribute.
flex-flow: direction wrap
For example
flex-flow: column-reverse wrap;
List the flex ‘main’ and ‘cross’ directions.
row, row-reverse, column, column-reverse
What is the default direction?
row (horizontal)
Define ‘justify-content’.
Aligns along the main axis with either flex-start (default), flex-end, center, space-between, or space-around.
List four kinds of alignments.
justify-content, align-content, align-item, align-self
What are the kinds of flex-direction settings?
row and column (row, row-reverse, column, column-reverse)
What is the difference between flex and inline-flex?
Flex consumes the entire horizontal line while inline-flex only wraps the flex-items it contains.
Define align-self.
Aligns only the specified item as flex-start, flex-end, center, stretch, or baseline.
How to allow flex-items to wrap if there isn’t enough room?
flex-wrap: wrap;
How does flex-grow affect the sizing if there isn’t enough room?
The sizing remains the same as the flex-basis.
Does the ‘order’ grouping change the logical (tabbed) order?
No.
Define ‘align-item’.
The items are aligned according to flex-start, flex-end, center, stretch, or baseline.
Define the ‘flex’ attribute.
flex: grow shrink basis
Example
flex: 0 1 2em
How do you set up a div to be a flex box container?
CSS: .container {
display: flex;
}
What are the kinds of flex-direction settings?
row and column (row, row-reverse, column, column-reverse)
How to prevent items from wrapping in a row when there isn’t enough room?
flex-wrap: nowrap
Can you set the ‘grow’ value for the container, the item, or both?
Both
What is the default ‘order’ grouping value?
Zero
What is the vertical axis called?
Cross axis
What is the default ‘flex-grow’ value?
One
What is a basis of ‘auto’?
Set the size to the defaults.
Define ‘align-content’.
The same as justify-content on it applies to the cross-axis AND it only applies to multi-line content.
It aligns the entire content according to flex-start, flex-end, center, space-between, space around, stretch (default), or baseline.
What are the objects in a flex box container called?
flex items
What is the wrapper around flex blocks called?
Container
What is the horizontal axis called?
Main axis
