Flexbox is a CSS layout system that distributes space and aligns elements along a single axis, either horizontally or vertically. It's the layout method behind most navigation bars, button groups, card rows, and any arrangement where you need elements to sit side by side or stack cleanly.
When a parent element is set to display: flex, it becomes a flex container and its direct children become flex items. The parent controls how those items are arranged: whether they line up in a row or a column, how the space between them is distributed, and how they align across the perpendicular axis. The children can influence their own size and positioning, but they're always working within the rules the parent set.
This is the reason elements inside a flex container sometimes don't respond the way you'd expect to changes you make on the element itself. The parent's flex rules are shaping the result. A sibling element with a larger flex-grow value can squeeze your element out of the space you expected it to occupy. Loupely Lens captures the flex properties on parent containers and includes them in the diagnosis when they're the source of a layout problem you're seeing on a child element.