CSS Positions
1 position that takes the element out of the document flow
absolute
To start using the Flexbox model, you need to first define a
flex box
This pseudo-class matches a specified element that is the first child of another element.
:first-child
Affects the size of the element. This also applies to the font-size, padding, height, and width of an element, too.
scale
Defines the element as a grid container and establishes a new grid formatting context for its contents.
display: grid; or display: inline-grid;
this positions does not move when the page scrolls
fixed
The flex container becomes flexible by setting the display property to
flex
Matches an element that is the last of its siblings.
:last-child
Tilts an element to the left or right, like turning a rectangle into a parallelogram.
skew
Defines the columns and rows of the grid with a space-separated list of values.
grid-template-columns
grid-template-rows
This positions allows the element to move until you tell it when to stop
sticky
This property defines in which direction the container wants to stack the flex items.
flex-direction
Matches when a user designates an item with a pointing device, such as holding the mouse pointer over the item.
hover
Moves an element sideways or up and down.
translate
Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.
column-gap ,row-gap, grid-column-gap, grid-row-gap
An element with with this position is not positioned in any special way; it is always positioned according to the normal flow of the page
static
this value stacks the flex items vertically (but from bottom to top):
column-reverse
Matches an element that is the last of its siblings, and also matches a certain type selector.
:last-of-type
moves the element clockwise from its current position.
rotate
Determines a grid item’s location within the grid by referring to specific grid lines.
grid-column-start, grid-column-end, grid-row-start,
grid-row-end
An element with this position is positioned relative to its normal position.
relative
This property specifies whether the flex items should wrap or not.
flex-wrap
Selects links that have already been visited by the current browser.
:visited
A function that is probably not intended to be written by hand, but combines all transforms into one.
This CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.
repeat()