Today’s goals:

• Review your most confusing CSS questions
• Start learning about flexbox, a CSS layout method used to create mobile-friendly sites

 Today’s featured website:

• https://www.elfyourself.com/– This silly site is a holiday classic for a reason! Here’s my (somewhat creepy) example: https://elfyourself.com?mId=73084072

 Most Confusing CSS

• Top questions
  1. Positioning (absolute, relative, fixed, sticky, static)
  2. CSS layout– when to use what?
• Some answers
  1. Positioning is just one CSS layout technique to use and you might not use it at all, depending on your project
  2. Mobile-first, responsive design will help you make design choices about your website. Design for a small screen first, then scale up.
  3. The goal of your website matters. For example, let’s look at YouTube, Nike, and CNN. What are the goals and how do you think they help drive the design?
  4. You might end up using WordPress (or another CMS) or a template, so you won’t necessarily be creating a page from scratch and will instead modify it to suit your needs. You will want to choose a theme or template that is mobile-friendly and/or responsive.
• CSS Layout- what we’ve learned and what’s coming
  1. Absolute, static, fixed, sticky, and relative positioning; floats; block, inline, and inline-block
  2. Flexbox and grid- two approaches that are often used for mobile-friendly, responsive design

 Flexbox (or flexible box)

• About
  1. Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces (Mozilla MDN). It’s often used in responsive web design.
  2. To use flexbox, add display: flex; to your style sheet. Flex is one of the many useful values of the display property. The display property changes how the browser displays content. What are the three display values we recently learned?
  3. Let’s see some of its properties in action here: http://the-echoplex.net/flexyboxes/
  4. Summary
     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.
     (from internetingishard.com)
• Working with Flexbox
  1. We are going to make two things with flexbox: a horizontal navigation menu and a photo gallery
  2. Download this code to begin and copy/paste into a new Notepad++ page. Save as flexbox.html.
  3. Read the comments for the directions. We will do this as a group or you can work at your own pace.
  4. Some new stuff:
     use of the nav tag to create our menu
     code to make our images more responsive (see CSS)
     the transform property (we are revisiting this fun property soon!)
  5. Let’s shrink the browser window when we finish fixing the code. What happens? Why?
  6. Questions:
     Why don’t we have to change the display of the images to block, inline, or inline-block? What display value are we using instead?
     How is using flexbox different than floats, positioning, and changing the display to block, inline, or inline-block?