Topics

• Extending our understanding of flexbox with item properties;
  • align-self;
  • order;
  • flex-basis;
  • flex-grow;
  • flex-shrink;

Tutorials

• ADV Section 04, videos 042 – 051
• The following HTML and CSS pairs will need to be completed as part of the code-along and uploaded to your server:
  • navbar.html / navbar.css
  • polygon.html / polygon.css
  • holy-grail.html / holy-grail.css

Problem set

Find a card model from a website of your choosing and model the core layout of that card. Take a screenshot of the card to work from. Then break the card down into ‘boxes.’ From there, come up with a HTML skeleton strategy. Finally try to recreate your card with CSS!

For the blog

Suggest an HMTL model and CSS flexbox strategy to create the following card:

Use the abbreviated syntax of a list with el.class_name and child el.class_name indented to describe the elements you would use. This nesting was displayed in last week‘s problem set example. Then describe how you would use flexbox and flexbox properties to manage the position of elements.