HTML & CSS Interview Question #88

What is the difference between justify-content and align-items?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

justify-content distributes flex items along the main axis when there is available free space. align-items controls how items are aligned along the cross axis within the flex line.

Detailed Explanation

justify-content distributes flex items along the main axis when there is available free space. align-items controls how items are aligned along the cross axis within the flex line.

The visual direction depends on flex-direction and writing mode. In a row layout, justify-content often appears horizontal and align-items vertical, while in a column layout their apparent directions change.

Code Example

.hero-actions {
    display: flex;
    min-height: 120px;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}