Member-only story
Fun with Flexbox (with Material-UI and React)
Part 2 of 2 — Editing the flex item’s properties
Okay so this article is a continuation of the previous article — link. Just like how it’s divided in this guide to flexbox, we’ll be looking what what happens when we edit the flex item’s properties.
Part 4: Examples where we Edit the flex item’s Properties
order
This property is probably pretty self-explanatory. When you define a few flex items within a flex container, it’ll render in the same order. But by specifying the specific order for a flex item, you can render the flex items in a different order.
flexGrow
To see the effects of this property kick in, one will have to compare how the flex items look like when the browser window is fully expanded VS when it’s shrunk (so I’ll be showing two screenshots with the same codes).
For flexGrow, the value you pass in dictates how much available space in the flex container it should take up.
