​​Geometric Abstraction

​​Flexbox

​​Flexbox is a set of CSS properties that help make it easy to create more structured layouts with your HTML. Flexbox is very good at putting elements into rows and columns, and centering elements within each other. 
​​
​​Walk through an animated guide to flexbox together. 
​​
​​→ Practice using Flexbox
  1. ​​Create a new HTML and CSS file within your class repo to experiment in.
  1. ​​Create 4 boxes on the page that are centered horizontally and vertically within the page, and don’t have equal spacing between the boxes.
  1. ​​Create 2 additional boxes that are aligned to the top right of the page.
  1. ​​Create 3 additional boxes that are aligned to the bottom of the page and have equal spacing between the boxes.

​​Additional resources

​​
​​

​​Positioning

​​When you want to move something around on the page, one way to do it is using the position​ CSS property.
​​
​​There are 5 primary ways of positioning in CSS. 
  • ​​static
  • ​​relative
  • ​​fixed
  • ​​absolute
  • ​​sticky
​​
​​All elements start out with static​ positioning by default.
​​
​​The relative​ property tells elements that are inside of it to be positioned relative to this element.
​​
​​The fixed​ property tells elements to position themselves according to the browser viewport.
​​
​​The absolute​ property tells elements to position themselves with the closest parent element that is not using static​ positioning. 
​​
​​The sticky​ property tells this element to become fixed when it reaches the top of the viewport.
​​
​​When using relative, fixed or absolute positioning, you can control which elements come on top of each other using z-index​. 
​​
​​Discuss relative width CSS units, e.g. %​, vw​, vh​.
​​
​​.header {
​​  position: fixed;
​​  z-index: 10;
​​}
​​
​​→ Practice using CSS positioning.
  1. ​​Add several elements to your page using static positioning. Make the elements tall enough so that you can scroll down the page. 
  1. ​​Add at least two additional items to the page that use fixed positioning. Position them in different locations around the page.
  1. ​​Add an absolutely positioned element to the page.