Shape of the Day:

• CSS Quiz – What do you remember?
• Flexbox – What it is and how it works!
• Broken Flexbox Assignment

Website of the Day:

https://codepen.io/jkantner/pen/ZaMeyW – Check out this cool site that brings back an old but still fun to play with toy!

1. Take this CSS Quiz and try your best. Write down anything you remember, key words or descriptions about anything.

2. Flexbox

• A one-dimensional layout for placing items in rows or columns. The items then flex to fill additional space and/or shrink to fit into smaller spaces. Responsive web design is where it is often used in.
• To utilize flexbox, display: flex; is used in the style sheet. Flex is a very useful value for the display property. Remember that display property is what changes how the browser views content – what were the three display values we recently learned?
• Try some of the properties in action here:
  • https://the-echoplex.net/flexyboxes/
• Here’s a summary of how to use the Flexbox (from the website – internetingishard.com)
  • Use display:flex; to create a flex container
  • Use justify-content; to define the horizontal alignment of items
  • Use align-items to define the vertical alignment of items.
  • Use flex-direction to set up columns or rows
  • Use the row-reverse or column-reverse values to flip item order
  • Use order to customize the order of individual elements
  • Use align-self to vertically align individual items

3. Broken Flexbox Assignment

• • Time to make two things with flexbox – a horizontal navigation menu and a photo gallery
  • Download the code here to begin – paste it into a new Brackets file and save as broken-flexbox-1.html
  • Notice some new stuff? – Use of the nav tag to make the menu and code to make the images more responsive with the transform property – pretty neat property that we will be coming back to soon!
  • What happens when you shrink the browser? Why does this happen?
  • Please answer the following questions in the code of your website in comments. Why don’t you have to change the display on the images (block, inline, inline-block)? What display value are you using instead? How is using flexbox different than floats, positioning, and changing display to block, inline, or inline-block?
  • Submit this exercise website into your student folder.