Member-only story
Today I thought I would create a tutorial explaining what Flexbox is and how it can be incorporated into your React-Native app including examples.
What is Flexbox?
Flexbox is a method used to define items in rows and columns that was introduced with CSS3. Items can either expand (flex) to fill additional space or shrink to fit smaller spaces when viewing the website/app on different screen sizes.
Older layout methods would include floats, positioning and tables. With flexbox we are more easily able to:
- Change the alignment of elements
- Organise elements in different directions
- Dynamically fit elements into a container to allow for more complex layouts
While Flexbox is an innovative method of organising elements on a page there are times where you would not want to use flexbox. One of these may be for websites which only support older browsers as web browsers like IE11 only supporting flexbox in a very minor fashion.
Use cases
Popular use cases of flexbox include:
- Centering items in the middle of a container ( vertically and horizontally)
- Aligning block elements horizontally
