Post/Code

HomeAboutUsesNow

Flexbox Froggy.

If you are looking to learn Flexbox, this is quite a fun game for getting the hang of it: Flexbox Froggy

Granted, it seems very oriented to kids, but I found it quite creative. For some more detailed information on the topic, you can't go wrong with the CSS Tricks Guide to Flexbox

The reason I have been revisting the topic is because Flexbox is the way that React Native powers layouts. While the CSS Tricks guide has been a goto resource for years, I had never encountered Flexbox Froggy before. Worth a few minutes of diversion.

Interestingly enough, since Flexbox is the default for React Native and as a result is attuned to mobile/vertical phone layouts, there are a few differences to regular web-based Flexbox defaults:

flex-direction: column;
box-sizing: border-box;
position: relative;
align-items: stretch;
flex-shrink: 0;
align-content: flex-start;
border: 0 solid black;
margin: 0;
padding: 0;
min-width: 0;

And dimensions in React Native are unitless.