Flexbox

CSS Flexible Box Layout, commonly known as Flexbox, is a modern layout model designed for arranging items in a single dimension—either as a row or as a column. Before Flexbox, developers relied on hacks like floats and positioning for layout, which were often brittle and complex. Flexbox provides a much more robust and intuitive way to align elements and distribute space. To get started, you declare a 'flex container' by setting its `display` property to `flex` or `inline-flex`. All direct children of this container automatically become 'flex items'. The power of Flexbox lies in the properties you can apply to the container. `flex-direction` controls the main axis (row or column). `justify-content` aligns items along this main axis (e.g., centering them, spacing them out evenly). `align-items` aligns items along the cross axis (the axis perpendicular to the main axis). `flex-wrap` allows items to wrap onto multiple lines if they run out of space. You can also apply properties to the flex items themselves. The `flex-grow`, `flex-shrink`, and `flex-basis` properties (often combined in the `flex` shorthand) give you precise control over how items expand or shrink to fill available space. Flexbox is perfect for component-level layouts, like navigation bars, card components, and form controls, where you need to align a group of items in a line.