Positioning property will set the rules on how an element will be placed on the page. It has 5 values:
- static: it follows the order of html
- relative: the element can go anywhere without messing up the flow of the html except for the one its attached to
- absolute: its placement is based on the px of the document not an element
- fixed: element will stay on the same spot at all times
- sticky: its location is based on the scroll of the document
Flexbox makes it easier to create flexible design. It has 5 properties.
- flex-direction: determines the direction
- flex-wrap: determines if it will have stop location and go to the next line or if it just go in one line
- justify-content: determines how it will begin
- align-items: determines how to align the items
- align-content: organizes the space around the items
Grid layouts with rows and columns. Has 4
- grid-template-columns: determines the size of the layout
- grid-template-rows: determines the size of each row
- justify-content: aligns the grid
- align-content: vertically align items