HTML & CSS Interview Question #86

What is Flexbox?

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

Quick Interview Answer

Flexbox is a one-dimensional CSS layout system designed to arrange items along a main axis while also controlling alignment on the cross axis. It is well suited to navigation bars, toolbars, card rows, button groups, and many component layouts.

Detailed Explanation

A flex container is created with display: flex or inline-flex. Its direct children become flex items and can grow, shrink, wrap, reorder visually, and align according to flex properties.

Code Example

.toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.toolbar .search {
    flex: 1;
}