Flexbox (CSS Flexible Box Layout)

Flexbox is a one-dimensional CSS layout system enabled with display: flex on a container. Its children (flex items) are laid out along one axis, and you control spacing, alignment, wrapping and how items grow or shrink.

Why it matters

Before flexbox, centering content or building equal-height columns needed hacks with floats and tables. Flexbox makes navigation bars, button groups, cards and form rows simple and responsive. For layouts that need rows and columns at once, use CSS Grid instead; the two work well together.

Example

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.toolbar .search { flex: 1; }

The toolbar items sit in a row, are vertically centered, and the search box expands to take the leftover width.

Common mistakes

Forgetting that justify-content follows the main axis, which flips when flex-direction: column is set.
Forgetting min-width: 0 on flex items, so long text overflows instead of shrinking.
Using flexbox for full page grids that are really two-dimensional.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.