CSS Flexbox: Complete One-Dimensional Layouts

Why Flexbox?

Flexbox (Flexible Box Layout) is designed for 1-dimensional layouts (either a row OR a column) with automatic alignment and distribution of space.

.navbar-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Horizontal spacing */
    align-items: center;            /* Vertical centering */
    gap: 1.5rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

Key Flex Items Properties:

• flex-grow: 1: Item expands to fill available remaining space.
• flex-shrink: 0: Prevents item from shrinking below its base width.
• flex-basis: Initial default size before remaining space is distributed.