2.2 - Flex Layout

Activity 1

2.2 - Activity 1 - Get in Class!

The last thing we learned in Lesson 2.1 was semantic tags. We get articles, sections, navs, and so forth, but… what happens when we run out? What about everything other than those tags? What about students? Apples? Looping GIFs? Things we haven't invented yet?

It's time for a major new way to write CSS. Get in class, it's time for CSS classes!

Going forward, we will be switching CSS to use classes instead of tags.

Key Terms

CSS class - Starts with a ., a way to designate what CSS applies to what

View Activity 1 Slides

Activity 2

2.2 - Activity 2 - Time to FLEX!

So far, our designs have had a major deficiency. They only are vertical. Don't you wish you could do more stuff that was, well, horizontal? Like stacking tings side-by-side?

It's time for the most powerful CSS skill yet: Flex. This is what lets put stuff side-by-side.

Key Terms

flex - CSS alignment system that lets us stack stuff horizontally
flex wrapping - A property of flex that, when turned on, will make things "wrap around" if they run out of space (vs getting increasingly squashed)

View Activity 2 Slides