Emily Kauffman

Back to teaching

CIS 275 Lecture 16: Flexible Box Module

Goals

  1. Review the homework
  2. Flexbox

Welcome!

Hey everyone, today's lecture will include a review of last week's homework, and then I'll move on to introducing Flexbox. If you didn't have any problems with the homework and everything works perfectly, feel free to skip to the next section!

If you want to watch the section on fluid layouts, skip to minute 17:56. To watch the section on setting heights, you can start at 22:00.

For more on vh vs percentages: vh vs percentages


Flexible Box Module

Flexible Box Module, aka flexbox, "aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic" (1).

  • Designed as a 1D layout model and as a method that could offer space distribution between items in an interface
  • Powerful tool for alignment (remember the height issue of a sidebar/main content?)
  • Can be used in place of floats for layout a lot of the time
  • Best used for small scale layouts (CSS Grid Layout is better for large, complex layouts)
  • Browser Support Table

Practical Flexbox Example

Read this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background and then watch the video below. Refer back to the article as I go through the example. It'll make a lot more sense! Follow along with the video for more practice.


In Class Exercises

  1. Make sure you've read the CSS Tricks article! Read it!
  2. Redo your fluid grid from the homework using flexbox (no need to turn this in...just for practice).
  3. Try a few of the exercises in this flexbox frog game: https://flexboxfroggy.com/. See how far you can get! I'm still trying to figure out #24 personally...
  4. Make one post in Lecture 16's channel stating a reflection on today's content, and something you're confused on regarding flexbox. If you do this before Thursday, I will try to answer any of the questions by then.

Next class, we'll spend more time on flexbox layouts and I'll introduce your mini-project (the one that replaces your Mastery Exam).


Resources

  1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
  2. https://flexboxfroggy.com/