Flexbox Flashcards
Flex Container
Flex Item
A flex container is an element on a page that contains flex items. All direct child elements of a flex container are flex items.
How to make an element a flex container
Set either
display: flex
or
display: inline-flex
flex vs. inline-flex
Both make the element into a flex container, but inline-flex also specifies that the flex container be an inline element, meaning it will be allowed to display on the same line as other elements
An example is with <div>. By default, a <div> is a block level element, so it would display on a separate line from any other elements. With inline-flex, the <div> can now be on the same line as other elements.</div></div></div>
justify-content
Specifies the positioning of flex items along the main axis
flex-start — all items will be positioned in order starting, from the left of the parent container, with no extra space between or before them.
flex-end — all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.
align-items
Specifies the positioning of flex-items along the cross axis
flex-start — all elements will be positioned at the top of the parent container.
flex-end — all elements will be positioned at the bottom of the parent container.
center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
baseline — the bottom of the content of all items will be aligned with each other.
stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).
flex-grow and flex-shrink
The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others.
The flex-shrink property does a similar thing, but for shrinking.
This code will specify that an item with class center will stretch twice as fast as an item with class side
.side {
width: 100px;
flex-grow: 1;
}
.center {
width: 100px;
flex-grow: 2;
}
flex-basis
flex-basis allows us to specify the width of an item before it stretches or shrinks.
flex: 2 1 150px;
Sets flex-grow to 2, flex-shrink to 1, and flex-basis to 150px
flex-wrap
The flex-wrap property can accept three values:
wrap — child elements of a flex container that don’t fit into a row will move down to the next line
wrap-reverse — the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)
nowrap — prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.
align-content
align-content is for use when the flex items are in multiple rows, specifying how the rows display in relation to each other
align-content accepts six values:
flex-start — all rows of elements will be positioned at the top of the parent container with no extra space between.
flex-end — all rows of elements will be positioned at the bottom of the parent container with no extra space between.
center — all rows of elements will be positioned at the center of the parent element with no extra space between.
space-between — all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.
space-around — all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
stretch — if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).
flex-direction
Specifies the axes directions in the flex container
row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.
flex-flow: column wrap;
Sets flex-direction to column, and flex-wrap to wrap
How to specify gap size between flex items?
Until browsers implement the gap properties for flexbox, margins have to be used to create gaps between items.
