display Property
view_quilt
display: flex creates a block-level flex container
view_stream
display: inline-flex creates an inline-level flex container
transform
Direct children of flex container become flex items
settings
Container controls layout of its items, not the document flow
code
Creating a Flex Container
.container {
display: flex;
}
.inline-container {
display: inline-flex;
}
compare
Block vs. Inline Flex Containers
display: flex
Block Container
Flex Container (100% width)
display: inline-flex
Inline Container
Flex Container (content width)