Stax

ورقة مرجعية CSS Flexbox

مرجع Flexbox الكامل: خصائص الحاوية، خصائص العنصر، الأنماط الشائعة والمخاطر.

Container properties

PropertyValuesEffect
displayflex / inline-flexActivate flexbox
flex-directionrow | row-reverse | column | column-reverseMain axis direction (default: row)
flex-wrapnowrap | wrap | wrap-reverseAllow items to wrap onto multiple lines
justify-contentflex-start | center | flex-end | space-between | space-around | space-evenlyDistribute along main axis
align-itemsstretch | flex-start | center | flex-end | baselineAlign on cross axis (single line)
align-contentSame as justify-content valuesDistribute multi-line content on cross axis
gap1rem, 16px 24pxSpace between items (replaces margins)

Item properties

PropertyValuesEffect
flex-growNumber (default 0)Share of remaining space (1 = take available)
flex-shrinkNumber (default 1)How much to shrink if overflow (0 = never)
flex-basisauto, 0, 250px, 30%Initial size before grow/shrink
flexShorthand: flex: 1 = 1 1 0Combines grow/shrink/basis
orderNumber (default 0)Reorder visually without changing DOM
align-selfOverride align-items for one itemPer-item cross-axis alignment

Common patterns

GoalCSS
Center horizontally + verticallydisplay: flex; justify-content: center; align-items: center;
Sticky footerBody: display: flex; flex-direction: column; min-height: 100vh; Main: flex: 1
Equal columnsParent: display: flex; Children: flex: 1
Navbar (logo left, links right)display: flex; justify-content: space-between; align-items: center;
Wrap on small screensdisplay: flex; flex-wrap: wrap; gap: 1rem; + child flex: 1 1 250px
Push one item to endThat item gets margin-left: auto
Reverse visual orderflex-direction: row-reverse or order: -1 on specific item

Browser support & gotchas

  • • Flexbox itself: 99%+ support (IE11 had a buggy implementation; if you still need IE, use Autoprefixer).
  • • gap in flexbox: 95%+ (Safari 14.1+ from April 2021). Older Safari needs margin fallback.
  • • Default min-width of flex items is auto, not 0 — items can overflow if content is wider than the container. Add min-width: 0 on items if text is overflowing.
  • • Flexbox children must be direct DOM children. Wrapping with extra divs breaks flex behavior.
  • • Percentage flex-basis doesn't include gap — use flex: 1 1 calc(50% - 0.5rem) for two columns with 1rem gap.

Build flexbox layouts visually with our CSS Flexbox Playground.

The Flexbox model in one line

You have a parent (the flex container) and direct children (the flex items). The container has a main axis (set by flex-direction) and a cross axis (perpendicular). Container properties align/distribute items along these axes. Item properties control how each item grows, shrinks, and individually aligns.

Visual debugging

Open Chrome DevTools → Elements → click on a flex container → click the small "flex" badge next to it in the styles panel. DevTools overlays the main/cross axis arrows directly on the page. This solves 80% of "why isn't my centering working" questions instantly.

الأسئلة الشائعة

When should I use Flexbox vs Grid?
Flexbox is for one-dimensional layouts — a row OR a column. Grid is for two-dimensional layouts — rows AND columns simultaneously. Use Flexbox for navbars, centering, button groups, list items. Use Grid for page layouts, image galleries, dashboard widgets. They compose well — Grid for the page skeleton, Flexbox inside each grid cell.
Why doesn't justify-content work the way I expect?
justify-content acts on the MAIN axis (defined by flex-direction). With flex-direction: row, justify-content: center horizontally centers; align-items: center vertically centers. With flex-direction: column, the axes swap — justify-content: center now vertically centers, align-items: center horizontally centers. Always check your flex-direction first.
How do I make items equal width with Flexbox?
Set flex: 1 on each item. That expands to flex: 1 1 0, meaning grow factor 1, shrink factor 1, basis 0 — all items get equal share of available space. If you want minimum content width, use flex: 1 1 auto. For three columns of equal width: parent display: flex, each child flex: 1.
Why are my flex items not wrapping?
Default flex-wrap is nowrap — items shrink to fit instead of wrapping. Add flex-wrap: wrap on the parent. Combined with min-width on children, this gives you responsive grids: parent is { display: flex; flex-wrap: wrap; gap: 16px; }, children are { flex: 1 1 250px } — wraps when items can't be 250px wide.
What's the difference between gap, margin, and padding in Flexbox?
gap (or row-gap / column-gap) adds spacing BETWEEN items only — no margin around the outer edges. margin on items also creates spacing but doubles up at the boundaries. padding on the parent adds inner space without affecting between-item spacing. gap is cleaner and easier to reason about than margins; use it whenever the browser supports it (Safari 14.1+, Chrome 84+ — basically everywhere).

أدوات ذات صلة