Flexbox (1/51)
What is Flexbox in CSS?
    Understanding Flexbox in CSS

    Flexbox, or the Flexible Box Layout, is a CSS layout model designed to provide an efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.

    Key Concepts
    • Flex container: The parent element with `display: flex` or `display: inline-flex`.
    • Flex items: The direct children of a flex container that are laid out according to flexbox rules.
    • Main axis and cross axis: Flex items are arranged along the main axis (default horizontal) and can be aligned along the cross axis (default vertical).
    • Flex properties like `justify-content`, `align-items`, `align-self`, and `flex-wrap` control the positioning and spacing of flex items.
    Example: Basic Flexbox Layout

    In this example, the `.container` is a flex container, and its children `.item` are flex items. They are evenly spaced along the main axis, and each item expands equally because of `flex: 1`.

    Best Practices
    • Use Flexbox for one-dimensional layouts (either row or column).
    • Combine with `flex-wrap` for responsive layouts where items may need to wrap onto multiple lines.
    • Understand the difference between `justify-content` (main axis) and `align-items` (cross axis) for proper alignment.
    • Test layouts across different screen sizes to ensure items behave as expected.