teaching machines

CS 347: Lecture 6 – Flexbox: Expansion

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

Dear students:

Last time we began our examination of Flexbox, focusing on the distribution and alignment of flex-children within their flex-parent. Now we turn to sizing the children and expanding them using a relational weight system. With the various properties of flex-parents and flex-children, we are able to achieve many standard user interface patterns.

Here’s your TODO list:

• Watch Expanding with flex-grow, in which we discover how to take the available space from the flex-parent and its justify-content and parcel it out to the flex-children.
• Watch Sizing with flex-basis, in which we explore some issues that come up in sizing flex-children.
• Watch Case Study: Lonely Child, in which we apply Flexbox to create a layout in which the flex-children are at both ends of their container.
• Watch Case Study: N-column, in which we apply Flexbox to create a crude version of Codepen and its 3-column layout.
• Watch Case Study: Holy Grail, in which we apply Flexbox to produce a standard 5-cell layout.
• Watch Haiku, in which we take a poetic aside.
• Investigate the flex-shrink property, which I did not cover in the videos.
• Post any questions and comments you have regarding the videos and readings on the course Slack.

See you next time.

Sincerely,