Space-Between and a Work Elevator

I recently have been working on a new React Native project for a client. React Native is a great library to be working with and all the design and layout aspects are created with CSS’ new flexbox property.

I have been using CSS for years but have yet to play with flexbox in the web space. Now messing around with it in React Native has been a blast. However, one item in flexbox that always confuses me was the space-between and space-around values. When I see them now I totally get it but it wasn’t until I was trapped in an elevator trapped like a sardine. Next time you are in an elevator notice this behavior that we all have when one person enters or exits the elevator. Every time someone would enter or exit the elevator all the bodies shift around creating an equal amount of space from each other. No one wants to be next to that guy. This is space-between. An equal amount of space between all objects not including the walls of the elevator.

If we included the walls of the elevator in this, like pretend they were covered with reactive green ooze and you would mutate into a ninja turtle. I actually wouldn’t mind touching it just fyi. So as the ooze is doing it’s oozing thing you create an equal amount of space between the walls of the elevator and the objects around you. This would be considered space-around. No one really knows if you would turn into a turtle anyway you could end up like Bebop and Rocksteady. So space-around would be an equal amount of space between the container and the objects within.

So on your next elevator ride pay attention to how people shift around as people enter or exit the elevator think flex: space-between or flex: space-around.

Also side note: You do not want to be stuck in an elevator with me. I go into survival mode in 2 seconds flat. I got stuck in an elevatory for 3 hours (7 minutes) and already had marked my territory, started a fire and was looking at the lunch (person) next to me.