Use padding instead of setting a height or a width. Percentages are useful for being responsive and setting the child dimensions in comparison to the parent element.
With many relatively simple layouts, you can get by with only one mobile-centric breakpoint somewhere around 500-600px.
More complex layouts might benefit from doing a full sized layout above 1200px, an altered “tablet” layout between 600px and 1200px and mobile below 600px. The real takeaway here is that it doesn’t really matter exactly where you set your breakpoints… just do what makes sense for your project.
If you’re working with larger screens, it can be a good idea to set maximum width for elements to avoid it stretching too much awkwardly across the screen.
min(500px, 70%); → whichever is smaller
max(500px, 70%) → whichever is bigger
Be careful about what you put padding around! The padding on width can get really big on smaller devices. Instead, add a container with what you want to move around, so you don’t need that padding for width (change the percentage of the width on the container and do margin: 0 auto!).
Flex will try to make all the heights (and widths) of the items equal! Watch out for this, for example, when you’re putting in an image and you don’t want it to stretch awkwardly.
Align-self: flex-start; is useful for images.