The flex system provides an easy and flexible way to apply responsive layout for differernt screen sizes.
For below examples, adjusting the screen width to see the difference.
Considering the horizonal space of a flex element is split into 12 portions, you can define how much spaces a flex item can take for different view breakpoints.
Setting a flex item size with fr to share remaining space evenly according to the fator. Not set the size or set it as "" works same as 1fr.
Setting a flex item size to auto make it fit its content's width.
The grid system helps to make a grid view structure.
The ratio box element helps to maintain a width/height ratio based on the width.
The view break element helps to render different views depending on breakpoints.
The wrap element applies a maximum width for its inner contents and leaves margins to both sides.