Piper's Notes

Websites are made up of 2 things.

  1. Visual elements
  2. Placment of the elements

CSS introduced the concept of Flexbox to create page layouts for dynamic UIs. It arranges elements in a predictable way.

CSS Property Description
display: flex; allows you to use other flex properties to build a responsive page
flex-direction: row / column / row-reverse / column-reverse allows you to align children into rows or columns
justify-content: tells Flexbox how to align and space out flex items
align-items: flex-start, flex-end, center, stretch, or baseline align flex items on the cross-axis
flex-wrap: no-wrap, wrap, wrap-reverse
flex-basis: property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.

Lessons Learned

Today I got to play around with position things. Daddy told me way back when he wrote HTML and websites this didn't exist and that in those days you had to do a lot of Photoshop slicing and different hacks to layout a web site. My how far things have come. Next up I am going to do CSS Grid and based on my readings the combination of grid and flexbox should solve almost all of my problems. Ta ta for now.