/flexbox-demo

Fork and clone the repo. Then edit the "flex-containers.css" file, leaving everything else in the repo alone. Start with Example 1 (".container-1"). Or, you can view the final product, with completed solutions, by going to https://davegregg.github.io/flexbox-demo/

Primary LanguageHTMLMIT LicenseMIT

Flexbox Demo

This project serves as a tool for teaching CSS Flexbox: Do the katas together with learners, narrating as you go. Please see the solutions for direction.

Advice:

Repetition is good. Continually reinforce the following key ideas:

  • The vocabulary of "main axis" and "cross axis". That is, don't take flex-direction or writing-mode for granted. Example language:

    And what is the main axis in this case? That's right: row because I am working in English and I have not specified otherwise.

  • The vocabulary of the "start" and the "end" of the axis, rather than "left," "right," "top," or "bottom."
  • The distinction between the "flex container" and its rules and "flex items" and their rules.
  • The idea that flexbox is as much about distributing available space as it is about distributing flex items.

TODO:

  • Detect plaintext-only feature and prompt with undo? Or other attempt at cross-browser compat with Firefox, Safari, Edge
  • Cache <style> elements individually
  • Then add a "View Solution" toggle for each .container
  • Capture Ctrl+/ and Cmd+/ to toggle line comments
  • Perhaps the "Solutions" may be cachable, as well, to be restored by a page-wide Reset