Flex

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2024-03-02

Random half-baked tips

TODO: Improve this

If flex space-between is not working it's probably because it has insufficient width (e.g. due to parent)

Auto margins (e.g. margin-left: auto) in combination with flex box are the easiest way to group items (e.g. when you need more control than justify-content: space-between and so on)

If an image looks stretched after applying flexbox, that's because align-self default is stretch. Change to align-self: center;