Photograph of a flexbox presentation, shot at an angle

Flexbox is one of the newest and most powerful systems for layout in web development, but can be challenging to learn due to its many new values. This reading list starts with the most fundamental properties (and most commonly used qualities), and will be expanded to more complicated lessons. The list also adds a series of resources to learn how to use flexbox with practice and games.

If you pay close attention to YouTube, you may have noticed that the video play button does not simply switch to a pause icon when clicked, but morphs very quickly between states. This is accomplished via , controlled with . Here, I’ll show my variation of the UI pattern.