teaching machines

CS 347: Lecture 5 – Flexbox: Distribution and Alignment

September 8, 2020 by Chris Johnson. Filed under fall-2020, lectures, webdev.

Dear students:

The web is still young, and its immaturity puts a lot of burden on developers. From time to time, however, a new feature emerges that actually makes their job easier. One of those new burden-lifting features is Flexbox, a modern layout system. In this lecture, we explore the power that Flexbox affords us over the distribution and alignment of children in a parent element.

Here’s your TODO list:

• Watch More Flexible Layout, in which we introduce the Flexbox layout algorithm.
• Watch Distribution in Flexbox, in which we examine the choices we have in distributing children along the main axis of flow in a flex-parent.
• Watch Alignment in Flexbox, in which we examine the choices we have in aligning children along the cross axis in a flex-parent.
• Watch Case Study: Centering Horizontally and Vertically, in which we apply Flexbox to center an element both vertically and horizontally.
• Watch Case Study: Navlinks, in which we apply Flexbox to display a bar of navigation links.
• Watch Case Study: Gallery, in which we apply Flexbox to display a gallery of images.
• Watch Flexercise, in which we play a little game for practicing with the various properties that we can set on flex-parents.
• Watch Haiku, in which we take a poetic aside.
• Play Flexercise.
• Post any questions and comments you have regarding the videos and readings on the course Slack.
• Complete your first blog post before Friday, September 11.
• Read the project 1 specification.

See you next time.

Sincerely,