[{"data":1,"prerenderedAt":3223},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns":3,"content-all-pages":2659,"live-demo:flexp-comment-card":3217},{"id":4,"title":5,"body":6,"description":2639,"extension":2640,"meta":2641,"navigation":863,"path":2655,"seo":2656,"stem":2657,"__hash__":2658},"content\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Findex.md","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"type":7,"value":8,"toc":2618},"minimark",[9,13,28,34,80,83,88,111,118,272,304,309,312,398,406,408,412,740,771,773,777,780,784,949,957,961,1068,1075,1079,1140,1143,1147,1189,1192,1194,1198,1201,1205,1409,2003,2010,2014,2025,2038,2045,2055,2115,2117,2121,2149,2164,2176,2190,2192,2196,2246,2248,2252,2382,2385,2387,2391,2496,2498,2502,2508,2535,2546,2552,2569,2573,2614],[10,11,5],"h1",{"id":12},"flexbox-layout-patterns-one-dimensional-layout-for-real-components",[14,15,16,17,22,23,27],"p",{},"Grid gets the attention in modern layout writing, and ",[18,19,21],"a",{"href":20},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002F","container queries"," get the excitement, but most of the boxes on any production page are still laid out by flexbox: toolbars, navigation bars, media objects, form rows, tag lists, button groups, card footers. Flexbox is the right tool whenever a layout runs along one axis and its items should negotiate their sizes from their content. This guide, part of ",[18,24,26],{"href":25},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts",", covers the sizing algorithm those negotiations run on, the patterns that make flex rows responsive without breakpoints, and the debugging workflow for the handful of flex bugs everybody hits.",[14,29,30],{},[31,32,33],"strong",{},"Prerequisites — this guide assumes you can already:",[35,36,37,46,53,69],"ul",{},[38,39,40,41,45],"li",{},"Write a basic ",[42,43,44],"code",{},"display: flex"," rule and explain main axis versus cross axis.",[38,47,48,49,52],{},"Read the box model: content, padding, border, margin, and what ",[42,50,51],{},"box-sizing: border-box"," changes.",[38,54,55,56,59,60,63,64,68],{},"Recognise intrinsic sizes such as ",[42,57,58],{},"min-content"," and ",[42,61,62],{},"max-content"," (see ",[18,65,67],{"href":66},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002F","Intrinsic Sizing Techniques",").",[38,70,71,72,75,76,79],{},"Use logical properties such as ",[42,73,74],{},"margin-inline-start"," instead of ",[42,77,78],{},"margin-left",".",[81,82],"hr",{},[84,85,87],"h2",{"id":86},"the-core-concept-items-negotiate-the-container-distributes","The Core Concept: Items Negotiate, the Container Distributes",[14,89,90,91,95,96,99,100,103,104,59,107,110],{},"The Flexible Box Layout specification defines a flex container as a box whose children are laid out along a single ",[92,93,94],"em",{},"main axis",", with each child's size determined by a ",[92,97,98],{},"flex base size"," plus a share of the container's positive or negative free space. Three properties per item — ",[42,101,102],{},"flex-grow",", ",[42,105,106],{},"flex-shrink",[42,108,109],{},"flex-basis"," — control that share, and the container controls direction, wrapping, alignment and gaps.",[14,112,113,114,117],{},"The key word is ",[92,115,116],{},"negotiate",". In a grid, you describe tracks and place items into them; the grid's sizes exist before the items do. In a flex container there are no tracks. Each item arrives with a preferred size, the container adds them up, and only then decides whether there is surplus to share out or a deficit to claw back. The final layout is an outcome of that negotiation, which is why flexbox excels when content should drive size and struggles when you want strict alignment across rows.",[119,120,126,127,126,131,126,135,126,143,126,153,126,159,126,163,126,168,126,172,126,181,126,183,126,187,126,190,126,193,126,196,126,200,126,202,126,206,126,209,126,212,126,215,126,219,126,222,126,226,126,230,126,233,126,236,126,242,126,248,126,254,126,258,126,262,126,266,126,269],"svg",{"viewBox":121,"role":122,"ariaLabel":123,"xmlns":124,"style":125},"0 0 720 360","img","The flex layout algorithm in four stages: base sizes, collect into lines, resolve flexible lengths per line, then align","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[128,129,130],"title",{},"The four stages of flex layout",[132,133,134],"desc",{},"Stage one determines each item's base size from flex-basis, width or content. Stage two collects items into lines if wrapping is on. Stage three grows or shrinks items within each line. Stage four aligns items and lines using justify-content, align-items and align-content.",[136,137,142],"text",{"textAnchor":138,"x":139,"y":140,"style":141},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","How a flex container turns preferences into a layout",[144,145],"rect",{"x":146,"y":147,"width":148,"height":149,"rx":150,"fill":151,"opacity":152},"30","50","150","120","10","#7aa2ff","0.18",[136,154,158],{"textAnchor":138,"x":155,"y":156,"style":157},"105","76","text-anchor:middle;fill:currentColor;font:700 14px sans-serif","1. Base size",[136,160,109],{"textAnchor":138,"x":155,"y":161,"style":162},"102","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace",[136,164,167],{"textAnchor":138,"x":155,"y":165,"style":166},"122","text-anchor:middle;fill:currentColor;font:12px sans-serif","else width",[136,169,171],{"textAnchor":138,"x":155,"y":170,"style":166},"142","else content",[173,174],"line",{"x1":175,"y1":176,"x2":177,"y2":176,"stroke":178,"strokeWidth":179,"opacity":180},"180","110","206","currentColor","1.5","0.6",[144,182],{"x":177,"y":147,"width":148,"height":149,"rx":150,"fill":151,"opacity":152},[136,184,186],{"textAnchor":138,"x":185,"y":156,"style":157},"281","2. Lines",[136,188,189],{"textAnchor":138,"x":185,"y":161,"style":162},"flex-wrap",[136,191,192],{"textAnchor":138,"x":185,"y":165,"style":166},"sizes + gaps",[136,194,195],{"textAnchor":138,"x":185,"y":170,"style":166},"vs container",[173,197],{"x1":198,"y1":176,"x2":199,"y2":176,"stroke":178,"strokeWidth":179,"opacity":180},"356","382",[144,201],{"x":199,"y":147,"width":148,"height":149,"rx":150,"fill":151,"opacity":152},[136,203,205],{"textAnchor":138,"x":204,"y":156,"style":157},"457","3. Flex",[136,207,208],{"textAnchor":138,"x":204,"y":161,"style":162},"grow \u002F shrink",[136,210,211],{"textAnchor":138,"x":204,"y":165,"style":166},"per line, then",[136,213,214],{"textAnchor":138,"x":204,"y":170,"style":166},"min\u002Fmax clamp",[173,216],{"x1":217,"y1":176,"x2":218,"y2":176,"stroke":178,"strokeWidth":179,"opacity":180},"532","558",[144,220],{"x":218,"y":147,"width":221,"height":149,"rx":150,"fill":151,"opacity":152},"140",[136,223,225],{"textAnchor":138,"x":224,"y":156,"style":157},"628","4. Align",[136,227,229],{"textAnchor":138,"x":224,"y":161,"style":228},"text-anchor:middle;fill:currentColor;font:11px ui-monospace,monospace","justify-content",[136,231,232],{"textAnchor":138,"x":224,"y":165,"style":228},"align-items",[136,234,235],{"textAnchor":138,"x":224,"y":170,"style":228},"align-content",[144,237],{"x":146,"y":177,"width":238,"height":239,"rx":150,"fill":240,"stroke":178,"strokeWidth":179,"opacity":241},"668","118","none","0.5",[136,243,247],{"textAnchor":138,"x":244,"y":245,"style":246},"364","232","text-anchor:middle;fill:currentColor;font:600 13px sans-serif","What each stage explains",[136,249,253],{"textAnchor":250,"x":147,"y":251,"style":252},"start","260","text-anchor:start;fill:currentColor;font:12px sans-serif","Stage 1: why width is ignored when flex: 1 is set.",[136,255,257],{"textAnchor":250,"x":147,"y":256,"style":252},"282","Stage 2: why a larger gap makes items wrap sooner.",[136,259,261],{"textAnchor":250,"x":147,"y":260,"style":252},"304","Stage 3: why the last line's items grow wider than the rest.",[136,263,265],{"textAnchor":250,"x":264,"y":251,"style":252},"400","Stage 3 clamp: why items overflow.",[136,267,268],{"textAnchor":250,"x":264,"y":256,"style":252},"Stage 4: why auto margins beat center.",[136,270,271],{"textAnchor":250,"x":264,"y":260,"style":252},"Stage 4: why safe alignment exists.",[14,273,274,275,279,280,59,284,288,289,293,294,298,299,303],{},"Nearly every flexbox surprise traces to one of those four stages, and the guides in this section are organised around them. ",[18,276,278],{"href":277},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-basis-vs-width\u002F","flex-basis vs width"," is stage one. ",[18,281,283],{"href":282},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows\u002F","Breakpoint-Free Rows With flex-wrap",[18,285,287],{"href":286},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing\u002F","Flexbox gap and Spacing"," are stage two. ",[18,290,292],{"href":291},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002F","Preventing Flex and Grid Overflow"," is the stage-three clamp. ",[18,295,297],{"href":296},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fcentering-in-css-every-method\u002F","Centering in CSS: Every Method"," is stage four, and the ",[18,300,302],{"href":301},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid\u002F","Sticky Footer With Flexbox or Grid"," combines stage three growth with a viewport minimum.",[305,306,308],"h3",{"id":307},"flexbox-or-grid","Flexbox or grid?",[14,310,311],{},"The recurring question has a crisp answer once the negotiation model is clear. Grid decides sizes from the container inward; flexbox decides them from the content outward. If items in different rows must line up — a product grid, a dashboard, a form with aligned labels — use grid, because only grid shares tracks between rows. If each row should size itself independently — a tag list, a toolbar, a breadcrumb — use flexbox, because independent lines are exactly what it provides.",[119,313,126,316,126,319,126,322,126,325,126,330,126,337,126,343,126,346,126,349,126,351,126,353,126,359,126,363,126,367,126,371,126,374,126,378,126,381,126,384,126,387,126,390,126,393],{"viewBox":314,"role":122,"ariaLabel":315,"xmlns":124,"style":125},"0 0 720 300","Grid shares column tracks across rows while flexbox sizes each line independently",[128,317,318],{},"Shared tracks versus independent lines",[132,320,321],{},"On the left, a grid's items align into columns across both rows. On the right, the same items in a wrapping flex container have different widths per line and do not align between lines.",[136,323,324],{"textAnchor":138,"x":139,"y":140,"style":141},"Container-in versus content-out",[136,326,329],{"textAnchor":138,"x":327,"y":328,"style":246},"190","56","Grid: tracks shared by rows",[144,331],{"x":332,"y":333,"width":334,"height":335,"rx":336,"fill":240,"stroke":178,"strokeWidth":179,"opacity":241},"40","70","300","130","8",[144,338],{"x":147,"y":339,"width":340,"height":147,"rx":341,"fill":151,"opacity":342},"80","88","5","0.3",[144,344],{"x":345,"y":339,"width":340,"height":147,"rx":341,"fill":151,"opacity":342},"146",[144,347],{"x":348,"y":339,"width":340,"height":147,"rx":341,"fill":151,"opacity":342},"242",[144,350],{"x":147,"y":221,"width":340,"height":147,"rx":341,"fill":151,"opacity":342},[144,352],{"x":345,"y":221,"width":340,"height":147,"rx":341,"fill":151,"opacity":342},[173,354],{"x1":170,"y1":355,"x2":170,"y2":356,"stroke":178,"strokeDashArray":357,"opacity":180},"74","196",[358,358],"4",[173,360],{"x1":361,"y1":355,"x2":361,"y2":356,"stroke":178,"strokeDashArray":362,"opacity":180},"238",[358,358],[136,364,366],{"textAnchor":138,"x":327,"y":365,"style":166},"230","columns line up",[136,368,370],{"textAnchor":138,"x":369,"y":328,"style":246},"530","Flex: each line sizes itself",[144,372],{"x":373,"y":333,"width":334,"height":335,"rx":336,"fill":240,"stroke":178,"strokeWidth":179,"opacity":241},"380",[144,375],{"x":376,"y":339,"width":377,"height":147,"rx":341,"fill":151,"opacity":342},"390","60",[144,379],{"x":380,"y":339,"width":335,"height":147,"rx":341,"fill":151,"opacity":342},"458",[144,382],{"x":383,"y":339,"width":355,"height":147,"rx":341,"fill":151,"opacity":342},"596",[144,385],{"x":376,"y":221,"width":386,"height":147,"rx":341,"fill":151,"opacity":342},"170",[144,388],{"x":389,"y":221,"width":161,"height":147,"rx":341,"fill":151,"opacity":342},"568",[136,391,392],{"textAnchor":138,"x":369,"y":365,"style":166},"widths follow content",[136,394,397],{"textAnchor":138,"x":139,"y":395,"style":396},"276","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.75","Need alignment between rows? Grid. Need rows to fit their own content? Flexbox.",[14,399,400,401,405],{},"The comparison with ",[18,402,404],{"href":403},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids\u002F","auto-fit and minmax() grids"," is the one that comes up most: both produce a wrapping list of cards without breakpoints, but the grid version guarantees equal columns while the flex version guarantees each card gets at least its preferred width.",[81,407],{},[84,409,411],{"id":410},"syntax-and-parameters","Syntax and Parameters",[413,414,415,434],"table",{},[416,417,418],"thead",{},[419,420,421,425,428,431],"tr",{},[422,423,424],"th",{},"Property",[422,426,427],{},"Accepted values",[422,429,430],{},"Default",[422,432,433],{},"Applies to",[435,436,437,465,492,515,536,573,601,622,642,659,681,703,722],"tbody",{},[419,438,439,445,453,462],{},[440,441,442],"td",{},[42,443,444],{},"display",[440,446,447,103,450],{},[42,448,449],{},"flex",[42,451,452],{},"inline-flex",[440,454,455,458,459],{},[42,456,457],{},"block"," \u002F ",[42,460,461],{},"inline",[440,463,464],{},"container",[419,466,467,472,486,490],{},[440,468,469],{},[42,470,471],{},"flex-direction",[440,473,474,103,477,103,480,103,483],{},[42,475,476],{},"row",[42,478,479],{},"row-reverse",[42,481,482],{},"column",[42,484,485],{},"column-reverse",[440,487,488],{},[42,489,476],{},[440,491,464],{},[419,493,494,498,509,513],{},[440,495,496],{},[42,497,189],{},[440,499,500,103,503,103,506],{},[42,501,502],{},"nowrap",[42,504,505],{},"wrap",[42,507,508],{},"wrap-reverse",[440,510,511],{},[42,512,502],{},[440,514,464],{},[419,516,517,522,528,534],{},[440,518,519],{},[42,520,521],{},"gap",[440,523,524,527],{},[42,525,526],{},"\u003Clength-percentage>"," for row then column",[440,529,530,533],{},[42,531,532],{},"normal"," (0)",[440,535,464],{},[419,537,538,542,567,571],{},[440,539,540],{},[42,541,229],{},[440,543,544,103,547,103,550,103,553,103,556,103,559,562,563,566],{},[42,545,546],{},"flex-start",[42,548,549],{},"center",[42,551,552],{},"space-between",[42,554,555],{},"space-around",[42,557,558],{},"space-evenly",[42,560,561],{},"safe","\u002F",[42,564,565],{},"unsafe"," modifiers",[440,568,569],{},[42,570,532],{},[440,572,464],{},[419,574,575,579,594,599],{},[440,576,577],{},[42,578,232],{},[440,580,581,103,584,103,586,103,588,103,591],{},[42,582,583],{},"stretch",[42,585,546],{},[42,587,549],{},[42,589,590],{},"baseline",[42,592,593],{},"flex-end",[440,595,596,598],{},[42,597,532],{}," (stretch)",[440,600,464],{},[419,602,603,607,615,619],{},[440,604,605],{},[42,606,235],{},[440,608,609,610,612,613],{},"as ",[42,611,229],{},", plus ",[42,614,583],{},[440,616,617],{},[42,618,532],{},[440,620,621],{},"multi-line container",[419,623,624,628,634,639],{},[440,625,626],{},[42,627,102],{},[440,629,630,633],{},[42,631,632],{},"\u003Cnumber>"," ≥ 0",[440,635,636],{},[42,637,638],{},"0",[440,640,641],{},"item",[419,643,644,648,652,657],{},[440,645,646],{},[42,647,106],{},[440,649,650,633],{},[42,651,632],{},[440,653,654],{},[42,655,656],{},"1",[440,658,641],{},[419,660,661,665,675,679],{},[440,662,663],{},[42,664,109],{},[440,666,667,103,670,103,673],{},[42,668,669],{},"auto",[42,671,672],{},"content",[42,674,526],{},[440,676,677],{},[42,678,669],{},[440,680,641],{},[419,682,683,687,696,701],{},[440,684,685],{},[42,686,449],{},[440,688,689,103,691,103,693],{},[42,690,240],{},[42,692,669],{},[42,694,695],{},"\u003Cgrow> \u003Cshrink>? \u003Cbasis>?",[440,697,698],{},[42,699,700],{},"0 1 auto",[440,702,641],{},[419,704,705,710,716,720],{},[440,706,707],{},[42,708,709],{},"align-self",[440,711,609,712,612,714],{},[42,713,232],{},[42,715,669],{},[440,717,718],{},[42,719,669],{},[440,721,641],{},[419,723,724,729,734,738],{},[440,725,726],{},[42,727,728],{},"order",[440,730,731],{},[42,732,733],{},"\u003Cinteger>",[440,735,736],{},[42,737,638],{},[440,739,641],{},[14,741,742,743,745,746,749,750,753,754,756,757,760,761,763,764,59,767,770],{},"Two defaults in that table cause most confusion. ",[42,744,106],{}," defaults to 1, so items shrink unless told not to — a fixed sidebar needs ",[42,747,748],{},"flex-shrink: 0"," or ",[42,751,752],{},"flex: none",". And the single-number ",[42,755,449],{}," shorthand expands to a basis of ",[42,758,759],{},"0%",", not ",[42,762,669],{},", so ",[42,765,766],{},"flex: 1",[42,768,769],{},"flex-grow: 1"," are different instructions.",[81,772],{},[84,774,776],{"id":775},"step-by-step-implementation-a-responsive-media-object","Step-by-Step Implementation: A Responsive Media Object",[14,778,779],{},"The media object — an image beside a block of text — is the canonical flex component. Building it in steps shows each stage of the algorithm doing its job.",[305,781,783],{"id":782},"step-1-a-row-with-a-fixed-media-column","Step 1: a row with a fixed media column",[785,786,791],"pre",{"className":787,"code":788,"language":789,"meta":790,"style":790},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".media {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-start;   \u002F* image keeps its own height, no stretching *\u002F\n}\n\n.media__img {\n  flex: none;                \u002F* 0 0 auto: never grow, never shrink *\u002F\n  width: 6rem;\n  aspect-ratio: 1;\n  border-radius: 8px;\n  object-fit: cover;\n}\n","css","",[42,792,793,805,819,835,852,858,865,873,889,904,916,931,944],{"__ignoreMap":790},[794,795,797,801],"span",{"class":173,"line":796},1,[794,798,800],{"class":799},"s-5SL",".media",[794,802,804],{"class":803},"suds8"," {\n",[794,806,808,811,814,816],{"class":173,"line":807},2,[794,809,810],{"class":799},"  display",[794,812,813],{"class":803},": ",[794,815,449],{"class":799},[794,817,818],{"class":803},";\n",[794,820,822,825,827,829,833],{"class":173,"line":821},3,[794,823,824],{"class":799},"  gap",[794,826,813],{"class":803},[794,828,656],{"class":799},[794,830,832],{"class":831},"sHUrx","rem",[794,834,818],{"class":803},[794,836,838,841,843,845,848],{"class":173,"line":837},4,[794,839,840],{"class":799},"  align-items",[794,842,813],{"class":803},[794,844,546],{"class":799},[794,846,847],{"class":803},";   ",[794,849,851],{"class":850},"sLBg1","\u002F* image keeps its own height, no stretching *\u002F\n",[794,853,855],{"class":173,"line":854},5,[794,856,857],{"class":803},"}\n",[794,859,861],{"class":173,"line":860},6,[794,862,864],{"emptyLinePlaceholder":863},true,"\n",[794,866,868,871],{"class":173,"line":867},7,[794,869,870],{"class":799},".media__img",[794,872,804],{"class":803},[794,874,876,879,881,883,886],{"class":173,"line":875},8,[794,877,878],{"class":799},"  flex",[794,880,813],{"class":803},[794,882,240],{"class":799},[794,884,885],{"class":803},";                ",[794,887,888],{"class":850},"\u002F* 0 0 auto: never grow, never shrink *\u002F\n",[794,890,892,895,897,900,902],{"class":173,"line":891},9,[794,893,894],{"class":799},"  width",[794,896,813],{"class":803},[794,898,899],{"class":799},"6",[794,901,832],{"class":831},[794,903,818],{"class":803},[794,905,907,910,912,914],{"class":173,"line":906},10,[794,908,909],{"class":799},"  aspect-ratio",[794,911,813],{"class":803},[794,913,656],{"class":799},[794,915,818],{"class":803},[794,917,919,922,924,926,929],{"class":173,"line":918},11,[794,920,921],{"class":799},"  border-radius",[794,923,813],{"class":803},[794,925,336],{"class":799},[794,927,928],{"class":831},"px",[794,930,818],{"class":803},[794,932,934,937,939,942],{"class":173,"line":933},12,[794,935,936],{"class":799},"  object-fit",[794,938,813],{"class":803},[794,940,941],{"class":799},"cover",[794,943,818],{"class":803},[794,945,947],{"class":173,"line":946},13,[794,948,857],{"class":803},[14,950,951,953,954,956],{},[42,952,752],{}," is the important declaration. Without it the image would shrink when the body text is long, because ",[42,955,106],{}," is 1 by default and the image has a definite width to give back.",[305,958,960],{"id":959},"step-2-let-the-body-absorb-the-rest-safely","Step 2: let the body absorb the rest, safely",[785,962,964],{"className":787,"code":963,"language":789,"meta":790,"style":790},".media__body {\n  flex: 1 1 0%;              \u002F* take all remaining space *\u002F\n  min-width: 0;              \u002F* allow long words and URLs to wrap instead of overflowing *\u002F\n}\n\n.media__body :is(h3, p) {\n  margin: 0 0 0.35rem;\n  overflow-wrap: anywhere;\n}\n",[42,965,966,973,996,1010,1014,1018,1038,1056,1064],{"__ignoreMap":790},[794,967,968,971],{"class":173,"line":796},[794,969,970],{"class":799},".media__body",[794,972,804],{"class":803},[794,974,975,977,979,981,984,987,990,993],{"class":173,"line":807},[794,976,878],{"class":799},[794,978,813],{"class":803},[794,980,656],{"class":799},[794,982,983],{"class":799}," 1",[794,985,986],{"class":799}," 0",[794,988,989],{"class":831},"%",[794,991,992],{"class":803},";              ",[794,994,995],{"class":850},"\u002F* take all remaining space *\u002F\n",[794,997,998,1001,1003,1005,1007],{"class":173,"line":821},[794,999,1000],{"class":799},"  min-width",[794,1002,813],{"class":803},[794,1004,638],{"class":799},[794,1006,992],{"class":803},[794,1008,1009],{"class":850},"\u002F* allow long words and URLs to wrap instead of overflowing *\u002F\n",[794,1011,1012],{"class":173,"line":837},[794,1013,857],{"class":803},[794,1015,1016],{"class":173,"line":854},[794,1017,864],{"emptyLinePlaceholder":863},[794,1019,1020,1022,1025,1028,1031,1033,1035],{"class":173,"line":860},[794,1021,970],{"class":799},[794,1023,1024],{"class":799}," :is",[794,1026,1027],{"class":803},"(",[794,1029,305],{"class":1030},"sne4z",[794,1032,103],{"class":803},[794,1034,14],{"class":1030},[794,1036,1037],{"class":803},") {\n",[794,1039,1040,1043,1045,1047,1049,1052,1054],{"class":173,"line":867},[794,1041,1042],{"class":799},"  margin",[794,1044,813],{"class":803},[794,1046,638],{"class":799},[794,1048,986],{"class":799},[794,1050,1051],{"class":799}," 0.35",[794,1053,832],{"class":831},[794,1055,818],{"class":803},[794,1057,1058,1061],{"class":173,"line":875},[794,1059,1060],{"class":799},"  overflow-wrap",[794,1062,1063],{"class":803},": anywhere;\n",[794,1065,1066],{"class":173,"line":891},[794,1067,857],{"class":803},[14,1069,1070,1071,1074],{},"The ",[42,1072,1073],{},"min-width: 0"," release is what keeps a pasted URL from pushing the whole component wider than its card. It is the most frequently forgotten line in flexbox.",[305,1076,1078],{"id":1077},"step-3-wrap-instead-of-squeezing","Step 3: wrap instead of squeezing",[785,1080,1082],{"className":787,"code":1081,"language":789,"meta":790,"style":790},".media {\n  flex-wrap: wrap;\n}\n\n.media__body {\n  flex: 1 1 14rem;           \u002F* prefer at least 14rem beside the image *\u002F\n}\n",[42,1083,1084,1090,1101,1105,1109,1115,1136],{"__ignoreMap":790},[794,1085,1086,1088],{"class":173,"line":796},[794,1087,800],{"class":799},[794,1089,804],{"class":803},[794,1091,1092,1095,1097,1099],{"class":173,"line":807},[794,1093,1094],{"class":799},"  flex-wrap",[794,1096,813],{"class":803},[794,1098,505],{"class":799},[794,1100,818],{"class":803},[794,1102,1103],{"class":173,"line":821},[794,1104,857],{"class":803},[794,1106,1107],{"class":173,"line":837},[794,1108,864],{"emptyLinePlaceholder":863},[794,1110,1111,1113],{"class":173,"line":854},[794,1112,970],{"class":799},[794,1114,804],{"class":803},[794,1116,1117,1119,1121,1123,1125,1128,1130,1133],{"class":173,"line":860},[794,1118,878],{"class":799},[794,1120,813],{"class":803},[794,1122,656],{"class":799},[794,1124,983],{"class":799},[794,1126,1127],{"class":799}," 14",[794,1129,832],{"class":831},[794,1131,1132],{"class":803},";           ",[794,1134,1135],{"class":850},"\u002F* prefer at least 14rem beside the image *\u002F\n",[794,1137,1138],{"class":173,"line":867},[794,1139,857],{"class":803},[14,1141,1142],{},"Now the body prefers 14rem. When the container cannot fit 6rem of image, the gap and 14rem of text, the body wraps beneath the image instead of becoming a column two words wide. No query, no breakpoint.",[305,1144,1146],{"id":1145},"step-4-add-a-trailing-action-pushed-to-the-end","Step 4: add a trailing action pushed to the end",[785,1148,1150],{"className":787,"code":1149,"language":789,"meta":790,"style":790},".media__action {\n  margin-inline-start: auto; \u002F* absorb free space, sit at the far end *\u002F\n  align-self: center;\n}\n",[42,1151,1152,1159,1174,1185],{"__ignoreMap":790},[794,1153,1154,1157],{"class":173,"line":796},[794,1155,1156],{"class":799},".media__action",[794,1158,804],{"class":803},[794,1160,1161,1164,1166,1168,1171],{"class":173,"line":807},[794,1162,1163],{"class":799},"  margin-inline-start",[794,1165,813],{"class":803},[794,1167,669],{"class":799},[794,1169,1170],{"class":803},"; ",[794,1172,1173],{"class":850},"\u002F* absorb free space, sit at the far end *\u002F\n",[794,1175,1176,1179,1181,1183],{"class":173,"line":821},[794,1177,1178],{"class":799},"  align-self",[794,1180,813],{"class":803},[794,1182,549],{"class":799},[794,1184,818],{"class":803},[794,1186,1187],{"class":173,"line":837},[794,1188,857],{"class":803},[14,1190,1191],{},"An auto margin takes every pixel of free space on its line, so the action stays flush right in a wide container and simply follows the body when the row wraps.",[81,1193],{},[84,1195,1197],{"id":1196},"annotated-production-example-a-comment-card","Annotated Production Example: A Comment Card",[14,1199,1200],{},"The finished component below combines all four steps with a container query for the parts flexbox cannot handle. Drag the frame narrower: the Reply button follows the text onto a new line first, then the body drops beneath the avatar, and the long URL wraps instead of widening the card.",[1202,1203],"live-demo",{"name":1204},"flexp-comment-card",[785,1206,1210],{"className":1207,"code":1208,"language":1209,"meta":790,"style":790},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Carticle class=\"comment\">\n  \u003Cdiv class=\"comment__inner\">\n    \u003Cimg class=\"comment__avatar\" src=\"\u002Favatars\u002Flena.jpg\" alt=\"\" width=\"96\" height=\"96\">\n    \u003Cdiv class=\"comment__body\">\n      \u003Ch3 class=\"comment__author\">Lena Okafor\u003C\u002Fh3>\n      \u003Cp class=\"comment__text\">The fix was min-width: 0 on the flex item — https:\u002F\u002Fexample.com\u002Fa\u002Fvery\u002Flong\u002Flink\u002Fthat\u002Fused\u002Fto\u002Foverflow\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cbutton class=\"comment__reply\" type=\"button\">Reply\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Farticle>\n","html",[42,1211,1212,1233,1250,1297,1312,1333,1353,1362,1391,1400],{"__ignoreMap":790},[794,1213,1214,1217,1220,1223,1226,1230],{"class":173,"line":796},[794,1215,1216],{"class":803},"\u003C",[794,1218,1219],{"class":1030},"article",[794,1221,1222],{"class":799}," class",[794,1224,1225],{"class":803},"=",[794,1227,1229],{"class":1228},"sT6z2","\"comment\"",[794,1231,1232],{"class":803},">\n",[794,1234,1235,1238,1241,1243,1245,1248],{"class":173,"line":807},[794,1236,1237],{"class":803},"  \u003C",[794,1239,1240],{"class":1030},"div",[794,1242,1222],{"class":799},[794,1244,1225],{"class":803},[794,1246,1247],{"class":1228},"\"comment__inner\"",[794,1249,1232],{"class":803},[794,1251,1252,1255,1257,1259,1261,1264,1267,1269,1272,1275,1277,1280,1283,1285,1288,1291,1293,1295],{"class":173,"line":821},[794,1253,1254],{"class":803},"    \u003C",[794,1256,122],{"class":1030},[794,1258,1222],{"class":799},[794,1260,1225],{"class":803},[794,1262,1263],{"class":1228},"\"comment__avatar\"",[794,1265,1266],{"class":799}," src",[794,1268,1225],{"class":803},[794,1270,1271],{"class":1228},"\"\u002Favatars\u002Flena.jpg\"",[794,1273,1274],{"class":799}," alt",[794,1276,1225],{"class":803},[794,1278,1279],{"class":1228},"\"\"",[794,1281,1282],{"class":799}," width",[794,1284,1225],{"class":803},[794,1286,1287],{"class":1228},"\"96\"",[794,1289,1290],{"class":799}," height",[794,1292,1225],{"class":803},[794,1294,1287],{"class":1228},[794,1296,1232],{"class":803},[794,1298,1299,1301,1303,1305,1307,1310],{"class":173,"line":837},[794,1300,1254],{"class":803},[794,1302,1240],{"class":1030},[794,1304,1222],{"class":799},[794,1306,1225],{"class":803},[794,1308,1309],{"class":1228},"\"comment__body\"",[794,1311,1232],{"class":803},[794,1313,1314,1317,1319,1321,1323,1326,1329,1331],{"class":173,"line":854},[794,1315,1316],{"class":803},"      \u003C",[794,1318,305],{"class":1030},[794,1320,1222],{"class":799},[794,1322,1225],{"class":803},[794,1324,1325],{"class":1228},"\"comment__author\"",[794,1327,1328],{"class":803},">Lena Okafor\u003C\u002F",[794,1330,305],{"class":1030},[794,1332,1232],{"class":803},[794,1334,1335,1337,1339,1341,1343,1346,1349,1351],{"class":173,"line":860},[794,1336,1316],{"class":803},[794,1338,14],{"class":1030},[794,1340,1222],{"class":799},[794,1342,1225],{"class":803},[794,1344,1345],{"class":1228},"\"comment__text\"",[794,1347,1348],{"class":803},">The fix was min-width: 0 on the flex item — https:\u002F\u002Fexample.com\u002Fa\u002Fvery\u002Flong\u002Flink\u002Fthat\u002Fused\u002Fto\u002Foverflow\u003C\u002F",[794,1350,14],{"class":1030},[794,1352,1232],{"class":803},[794,1354,1355,1358,1360],{"class":173,"line":867},[794,1356,1357],{"class":803},"    \u003C\u002F",[794,1359,1240],{"class":1030},[794,1361,1232],{"class":803},[794,1363,1364,1366,1369,1371,1373,1376,1379,1381,1384,1387,1389],{"class":173,"line":875},[794,1365,1254],{"class":803},[794,1367,1368],{"class":1030},"button",[794,1370,1222],{"class":799},[794,1372,1225],{"class":803},[794,1374,1375],{"class":1228},"\"comment__reply\"",[794,1377,1378],{"class":799}," type",[794,1380,1225],{"class":803},[794,1382,1383],{"class":1228},"\"button\"",[794,1385,1386],{"class":803},">Reply\u003C\u002F",[794,1388,1368],{"class":1030},[794,1390,1232],{"class":803},[794,1392,1393,1396,1398],{"class":173,"line":891},[794,1394,1395],{"class":803},"  \u003C\u002F",[794,1397,1240],{"class":1030},[794,1399,1232],{"class":803},[794,1401,1402,1405,1407],{"class":173,"line":906},[794,1403,1404],{"class":803},"\u003C\u002F",[794,1406,1219],{"class":1030},[794,1408,1232],{"class":803},[785,1410,1412],{"className":787,"code":1411,"language":789,"meta":790,"style":790},".comment {\n  container-type: inline-size;         \u002F* for the typography step only *\u002F\n}\n\n.comment__inner {\n  display: flex;\n  flex-wrap: wrap;                     \u002F* stage 2: wrap instead of squeezing *\u002F\n  align-items: flex-start;\n  gap: 0.75rem 1rem;                   \u002F* more air between wrapped lines *\u002F\n  padding: 1rem;\n  border: 1px solid #cbd5e1;\n  border-radius: 12px;\n}\n\n.comment__avatar {\n  flex: none;                          \u002F* stage 1+3: fixed, never shrinks *\u002F\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.comment__body {\n  flex: 1 1 16rem;                     \u002F* stage 1: prefer 16rem beside the avatar *\u002F\n  min-width: 0;                        \u002F* stage 3 clamp: allow long URLs to wrap *\u002F\n}\n\n.comment__author { margin: 0; font-size: 1rem; }\n\n.comment__text {\n  margin: 0.25rem 0 0;\n  overflow-wrap: anywhere;\n}\n\n.comment__reply {\n  margin-inline-start: auto;           \u002F* stage 4: push to the far end *\u002F\n  padding: 0.4rem 0.8rem;\n  border: 1px solid #94a3b8;\n  border-radius: 6px;\n  background: transparent;\n  font: inherit;\n}\n\n.comment__reply:focus-visible {\n  outline: 2px solid #2d5bff;\n  outline-offset: 2px;\n}\n\n\u002F* Flexbox cannot change type size; a container query can. *\u002F\n@container (width > 36rem) {\n  .comment__author { font-size: 1.125rem; }\n  .comment__avatar { width: 3.5rem; height: 3.5rem; }\n}\n",[42,1413,1414,1421,1432,1436,1440,1447,1457,1471,1481,1502,1515,1534,1547,1551,1556,1564,1579,1593,1607,1620,1631,1636,1641,1649,1670,1685,1690,1695,1725,1730,1738,1756,1763,1768,1773,1781,1795,1814,1832,1845,1858,1871,1876,1881,1889,1909,1923,1928,1933,1939,1948,1967,1998],{"__ignoreMap":790},[794,1415,1416,1419],{"class":173,"line":796},[794,1417,1418],{"class":799},".comment",[794,1420,804],{"class":803},[794,1422,1423,1426,1429],{"class":173,"line":807},[794,1424,1425],{"class":799},"  container-type",[794,1427,1428],{"class":803},": inline-size;         ",[794,1430,1431],{"class":850},"\u002F* for the typography step only *\u002F\n",[794,1433,1434],{"class":173,"line":821},[794,1435,857],{"class":803},[794,1437,1438],{"class":173,"line":837},[794,1439,864],{"emptyLinePlaceholder":863},[794,1441,1442,1445],{"class":173,"line":854},[794,1443,1444],{"class":799},".comment__inner",[794,1446,804],{"class":803},[794,1448,1449,1451,1453,1455],{"class":173,"line":860},[794,1450,810],{"class":799},[794,1452,813],{"class":803},[794,1454,449],{"class":799},[794,1456,818],{"class":803},[794,1458,1459,1461,1463,1465,1468],{"class":173,"line":867},[794,1460,1094],{"class":799},[794,1462,813],{"class":803},[794,1464,505],{"class":799},[794,1466,1467],{"class":803},";                     ",[794,1469,1470],{"class":850},"\u002F* stage 2: wrap instead of squeezing *\u002F\n",[794,1472,1473,1475,1477,1479],{"class":173,"line":875},[794,1474,840],{"class":799},[794,1476,813],{"class":803},[794,1478,546],{"class":799},[794,1480,818],{"class":803},[794,1482,1483,1485,1487,1490,1492,1494,1496,1499],{"class":173,"line":891},[794,1484,824],{"class":799},[794,1486,813],{"class":803},[794,1488,1489],{"class":799},"0.75",[794,1491,832],{"class":831},[794,1493,983],{"class":799},[794,1495,832],{"class":831},[794,1497,1498],{"class":803},";                   ",[794,1500,1501],{"class":850},"\u002F* more air between wrapped lines *\u002F\n",[794,1503,1504,1507,1509,1511,1513],{"class":173,"line":906},[794,1505,1506],{"class":799},"  padding",[794,1508,813],{"class":803},[794,1510,656],{"class":799},[794,1512,832],{"class":831},[794,1514,818],{"class":803},[794,1516,1517,1520,1522,1524,1526,1529,1532],{"class":173,"line":918},[794,1518,1519],{"class":799},"  border",[794,1521,813],{"class":803},[794,1523,656],{"class":799},[794,1525,928],{"class":831},[794,1527,1528],{"class":799}," solid",[794,1530,1531],{"class":799}," #cbd5e1",[794,1533,818],{"class":803},[794,1535,1536,1538,1540,1543,1545],{"class":173,"line":933},[794,1537,921],{"class":799},[794,1539,813],{"class":803},[794,1541,1542],{"class":799},"12",[794,1544,928],{"class":831},[794,1546,818],{"class":803},[794,1548,1549],{"class":173,"line":946},[794,1550,857],{"class":803},[794,1552,1554],{"class":173,"line":1553},14,[794,1555,864],{"emptyLinePlaceholder":863},[794,1557,1559,1562],{"class":173,"line":1558},15,[794,1560,1561],{"class":799},".comment__avatar",[794,1563,804],{"class":803},[794,1565,1567,1569,1571,1573,1576],{"class":173,"line":1566},16,[794,1568,878],{"class":799},[794,1570,813],{"class":803},[794,1572,240],{"class":799},[794,1574,1575],{"class":803},";                          ",[794,1577,1578],{"class":850},"\u002F* stage 1+3: fixed, never shrinks *\u002F\n",[794,1580,1582,1584,1586,1589,1591],{"class":173,"line":1581},17,[794,1583,894],{"class":799},[794,1585,813],{"class":803},[794,1587,1588],{"class":799},"3",[794,1590,832],{"class":831},[794,1592,818],{"class":803},[794,1594,1596,1599,1601,1603,1605],{"class":173,"line":1595},18,[794,1597,1598],{"class":799},"  height",[794,1600,813],{"class":803},[794,1602,1588],{"class":799},[794,1604,832],{"class":831},[794,1606,818],{"class":803},[794,1608,1610,1612,1614,1616,1618],{"class":173,"line":1609},19,[794,1611,921],{"class":799},[794,1613,813],{"class":803},[794,1615,147],{"class":799},[794,1617,989],{"class":831},[794,1619,818],{"class":803},[794,1621,1623,1625,1627,1629],{"class":173,"line":1622},20,[794,1624,936],{"class":799},[794,1626,813],{"class":803},[794,1628,941],{"class":799},[794,1630,818],{"class":803},[794,1632,1634],{"class":173,"line":1633},21,[794,1635,857],{"class":803},[794,1637,1639],{"class":173,"line":1638},22,[794,1640,864],{"emptyLinePlaceholder":863},[794,1642,1644,1647],{"class":173,"line":1643},23,[794,1645,1646],{"class":799},".comment__body",[794,1648,804],{"class":803},[794,1650,1652,1654,1656,1658,1660,1663,1665,1667],{"class":173,"line":1651},24,[794,1653,878],{"class":799},[794,1655,813],{"class":803},[794,1657,656],{"class":799},[794,1659,983],{"class":799},[794,1661,1662],{"class":799}," 16",[794,1664,832],{"class":831},[794,1666,1467],{"class":803},[794,1668,1669],{"class":850},"\u002F* stage 1: prefer 16rem beside the avatar *\u002F\n",[794,1671,1673,1675,1677,1679,1682],{"class":173,"line":1672},25,[794,1674,1000],{"class":799},[794,1676,813],{"class":803},[794,1678,638],{"class":799},[794,1680,1681],{"class":803},";                        ",[794,1683,1684],{"class":850},"\u002F* stage 3 clamp: allow long URLs to wrap *\u002F\n",[794,1686,1688],{"class":173,"line":1687},26,[794,1689,857],{"class":803},[794,1691,1693],{"class":173,"line":1692},27,[794,1694,864],{"emptyLinePlaceholder":863},[794,1696,1698,1701,1704,1707,1709,1711,1713,1716,1718,1720,1722],{"class":173,"line":1697},28,[794,1699,1700],{"class":799},".comment__author",[794,1702,1703],{"class":803}," { ",[794,1705,1706],{"class":799},"margin",[794,1708,813],{"class":803},[794,1710,638],{"class":799},[794,1712,1170],{"class":803},[794,1714,1715],{"class":799},"font-size",[794,1717,813],{"class":803},[794,1719,656],{"class":799},[794,1721,832],{"class":831},[794,1723,1724],{"class":803},"; }\n",[794,1726,1728],{"class":173,"line":1727},29,[794,1729,864],{"emptyLinePlaceholder":863},[794,1731,1733,1736],{"class":173,"line":1732},30,[794,1734,1735],{"class":799},".comment__text",[794,1737,804],{"class":803},[794,1739,1741,1743,1745,1748,1750,1752,1754],{"class":173,"line":1740},31,[794,1742,1042],{"class":799},[794,1744,813],{"class":803},[794,1746,1747],{"class":799},"0.25",[794,1749,832],{"class":831},[794,1751,986],{"class":799},[794,1753,986],{"class":799},[794,1755,818],{"class":803},[794,1757,1759,1761],{"class":173,"line":1758},32,[794,1760,1060],{"class":799},[794,1762,1063],{"class":803},[794,1764,1766],{"class":173,"line":1765},33,[794,1767,857],{"class":803},[794,1769,1771],{"class":173,"line":1770},34,[794,1772,864],{"emptyLinePlaceholder":863},[794,1774,1776,1779],{"class":173,"line":1775},35,[794,1777,1778],{"class":799},".comment__reply",[794,1780,804],{"class":803},[794,1782,1784,1786,1788,1790,1792],{"class":173,"line":1783},36,[794,1785,1163],{"class":799},[794,1787,813],{"class":803},[794,1789,669],{"class":799},[794,1791,1132],{"class":803},[794,1793,1794],{"class":850},"\u002F* stage 4: push to the far end *\u002F\n",[794,1796,1798,1800,1802,1805,1807,1810,1812],{"class":173,"line":1797},37,[794,1799,1506],{"class":799},[794,1801,813],{"class":803},[794,1803,1804],{"class":799},"0.4",[794,1806,832],{"class":831},[794,1808,1809],{"class":799}," 0.8",[794,1811,832],{"class":831},[794,1813,818],{"class":803},[794,1815,1817,1819,1821,1823,1825,1827,1830],{"class":173,"line":1816},38,[794,1818,1519],{"class":799},[794,1820,813],{"class":803},[794,1822,656],{"class":799},[794,1824,928],{"class":831},[794,1826,1528],{"class":799},[794,1828,1829],{"class":799}," #94a3b8",[794,1831,818],{"class":803},[794,1833,1835,1837,1839,1841,1843],{"class":173,"line":1834},39,[794,1836,921],{"class":799},[794,1838,813],{"class":803},[794,1840,899],{"class":799},[794,1842,928],{"class":831},[794,1844,818],{"class":803},[794,1846,1848,1851,1853,1856],{"class":173,"line":1847},40,[794,1849,1850],{"class":799},"  background",[794,1852,813],{"class":803},[794,1854,1855],{"class":799},"transparent",[794,1857,818],{"class":803},[794,1859,1861,1864,1866,1869],{"class":173,"line":1860},41,[794,1862,1863],{"class":799},"  font",[794,1865,813],{"class":803},[794,1867,1868],{"class":799},"inherit",[794,1870,818],{"class":803},[794,1872,1874],{"class":173,"line":1873},42,[794,1875,857],{"class":803},[794,1877,1879],{"class":173,"line":1878},43,[794,1880,864],{"emptyLinePlaceholder":863},[794,1882,1884,1887],{"class":173,"line":1883},44,[794,1885,1886],{"class":799},".comment__reply:focus-visible",[794,1888,804],{"class":803},[794,1890,1892,1895,1897,1900,1902,1904,1907],{"class":173,"line":1891},45,[794,1893,1894],{"class":799},"  outline",[794,1896,813],{"class":803},[794,1898,1899],{"class":799},"2",[794,1901,928],{"class":831},[794,1903,1528],{"class":799},[794,1905,1906],{"class":799}," #2d5bff",[794,1908,818],{"class":803},[794,1910,1912,1915,1917,1919,1921],{"class":173,"line":1911},46,[794,1913,1914],{"class":799},"  outline-offset",[794,1916,813],{"class":803},[794,1918,1899],{"class":799},[794,1920,928],{"class":831},[794,1922,818],{"class":803},[794,1924,1926],{"class":173,"line":1925},47,[794,1927,857],{"class":803},[794,1929,1931],{"class":173,"line":1930},48,[794,1932,864],{"emptyLinePlaceholder":863},[794,1934,1936],{"class":173,"line":1935},49,[794,1937,1938],{"class":850},"\u002F* Flexbox cannot change type size; a container query can. *\u002F\n",[794,1940,1942,1945],{"class":173,"line":1941},50,[794,1943,1944],{"class":831},"@container",[794,1946,1947],{"class":803}," (width > 36rem) {\n",[794,1949,1951,1954,1956,1958,1960,1963,1965],{"class":173,"line":1950},51,[794,1952,1953],{"class":799},"  .comment__author",[794,1955,1703],{"class":803},[794,1957,1715],{"class":799},[794,1959,813],{"class":803},[794,1961,1962],{"class":799},"1.125",[794,1964,832],{"class":831},[794,1966,1724],{"class":803},[794,1968,1970,1973,1975,1978,1980,1983,1985,1987,1990,1992,1994,1996],{"class":173,"line":1969},52,[794,1971,1972],{"class":799},"  .comment__avatar",[794,1974,1703],{"class":803},[794,1976,1977],{"class":799},"width",[794,1979,813],{"class":803},[794,1981,1982],{"class":799},"3.5",[794,1984,832],{"class":831},[794,1986,1170],{"class":803},[794,1988,1989],{"class":799},"height",[794,1991,813],{"class":803},[794,1993,1982],{"class":799},[794,1995,832],{"class":831},[794,1997,1724],{"class":803},[794,1999,2001],{"class":173,"line":2000},53,[794,2002,857],{"class":803},[14,2004,2005,2006,2009],{},"The avatar has an empty ",[42,2007,2008],{},"alt"," because the author's name is in the heading right beside it; repeating the name as alt text would make screen readers announce it twice. The Reply button stays after the body in the DOM, so its tab position matches its visual position at every width.",[305,2011,2013],{"id":2012},"who-decides-what-flexbox-and-the-container-query-together","Who decides what: flexbox and the container query together",[14,2015,2016,2017,2020,2021,2024],{},"The comment card deliberately splits responsibility. Flexbox owns ",[92,2018,2019],{},"placement",": whether the body sits beside the avatar or beneath it, and where the Reply button lands. The container query owns ",[92,2022,2023],{},"presentation",": type size and avatar size. Keeping the two concerns apart is what makes the component robust, because each mechanism is doing the thing it is good at.",[14,2026,2027,2028,2030,2031,2033,2034,2037],{},"The tempting alternative is to let the container query do everything — switch ",[42,2029,471],{}," to ",[42,2032,482],{}," below 30rem, change the gap, move the button. That works, but it reintroduces a hand-picked width, and the width is a guess about content. A long author name or a German translation of \"Reply\" changes where the layout ",[92,2035,2036],{},"should"," break, but a container query keeps breaking at 30rem. Flex wrapping recomputes the break from the real content every time, so it cannot be wrong about whether things fit.",[14,2039,2040,2041,2044],{},"The rule of thumb that falls out of this is useful beyond comment cards: ",[31,2042,2043],{},"let flexbox or grid decide whether things fit, and let queries decide how things look once they do."," Wrapping handles the question \"is there room?\", which depends on content and changes constantly. Queries handle the question \"how big should the type be at this size?\", which is a design decision and only needs a threshold.",[14,2046,2047,2048,2051,2052,2054],{},"One interaction to watch: a container query cannot react to a wrap. There is no selector for \"this flex item wrapped onto a second line\", so if the body text should be styled differently when it sits beneath the avatar, you need a query whose threshold approximates the wrap point. Keep that threshold slightly ",[92,2049,2050],{},"above"," the natural wrap width — for example, the sum of the avatar, the gap and the body's ",[42,2053,109],{}," plus a margin — so the style change always happens before or at the wrap, never after it, and the component never shows the wide style in the narrow layout.",[119,2056,126,2059,126,2062,126,2065,126,2068,126,2072,126,2075,126,2080,126,2084,126,2088,126,2093,126,2096,126,2099,126,2102,126,2105,126,2108,126,2111],{"viewBox":2057,"role":122,"ariaLabel":2058,"xmlns":124,"style":125},"0 0 720 280","Responsibility split: flexbox decides whether items fit and where they wrap; the container query decides type and avatar size",[128,2060,2061],{},"Placement versus presentation",[132,2063,2064],{},"Two columns. Flexbox handles placement: wrap point, item order along the line, and pushing the action to the end. The container query handles presentation: font size, avatar size and spacing tokens. An arrow notes that queries cannot observe wraps.",[136,2066,2067],{"textAnchor":138,"x":139,"y":140,"style":141},"Split the job between the two mechanisms",[144,2069],{"x":332,"y":2070,"width":334,"height":2071,"rx":150,"fill":151,"opacity":152},"46","160",[136,2073,2074],{"textAnchor":138,"x":327,"y":355,"style":157},"Flexbox: placement",[136,2076,2079],{"textAnchor":138,"x":327,"y":2077,"style":2078},"104","text-anchor:middle;fill:currentColor;font:13px sans-serif","Does the body fit beside?",[136,2081,2083],{"textAnchor":138,"x":327,"y":2082,"style":2078},"128","Where does the row wrap?",[136,2085,2087],{"textAnchor":138,"x":327,"y":2086,"style":2078},"152","Push Reply to the end",[136,2089,2092],{"textAnchor":138,"x":327,"y":2090,"style":2091},"184","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.8","decided from real content",[144,2094],{"x":373,"y":2070,"width":334,"height":2071,"rx":150,"fill":240,"stroke":178,"strokeWidth":179,"opacity":2095},"0.55",[136,2097,2098],{"textAnchor":138,"x":369,"y":355,"style":157},"Container query: presentation",[136,2100,2101],{"textAnchor":138,"x":369,"y":2077,"style":2078},"Heading font size",[136,2103,2104],{"textAnchor":138,"x":369,"y":2082,"style":2078},"Avatar dimensions",[136,2106,2107],{"textAnchor":138,"x":369,"y":2086,"style":2078},"Spacing tokens",[136,2109,2110],{"textAnchor":138,"x":369,"y":2090,"style":2091},"decided from a threshold",[136,2112,2114],{"textAnchor":138,"x":139,"y":2113,"style":166},"240","A query cannot see a wrap, so set its threshold at or above the natural wrap width.",[81,2116],{},[84,2118,2120],{"id":2119},"performance-and-accessibility-notes","Performance and Accessibility Notes",[14,2122,2123,2126,2127,103,2129,749,2131,2133,2134,59,2137,2140,2141,2144,2145,79],{},[31,2124,2125],{},"Layout cost."," Flex layout is fast for ordinary components, but content-sized items can require the engine to measure children before it can size the container, and nested content-sized flex containers multiply that work. The practical risk is animation, not static layout: transitioning ",[42,2128,1977],{},[42,2130,109],{},[42,2132,521],{}," re-runs the flex algorithm on every frame, and with it every ancestor that depends on the result. Animate ",[42,2135,2136],{},"transform",[42,2138,2139],{},"opacity"," instead, and if an item must appear to grow, scale it with a transform or animate a ",[42,2142,2143],{},"grid-template-columns"," track in a contained subtree. The trade-offs are covered in ",[18,2146,2148],{"href":2147},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps\u002F","Optimizing CSS Animations for 60fps",[14,2150,2151,2154,2155,103,2157,103,2159,59,2161,2163],{},[31,2152,2153],{},"Visual order and DOM order."," ",[42,2156,728],{},[42,2158,479],{},[42,2160,485],{},[42,2162,508],{}," all move items visually without changing the DOM. Keyboard focus and screen readers follow the DOM, so any of them can produce a focus sequence that jumps around the screen — a failure of WCAG 2.4.3 Focus Order and a real burden for magnifier users. Use them only for items that are not focusable and whose reading order does not matter.",[14,2165,2166,2169,2170,59,2173,2175],{},[31,2167,2168],{},"Reflow at zoom."," Flex rows that wrap are naturally friendly to WCAG 1.4.10 Reflow, because they turn into stacks when the effective viewport narrows. Rows with ",[42,2171,2172],{},"flex-wrap: nowrap",[42,2174,748],{}," items are the opposite: they force horizontal scrolling at high zoom. Audit any non-wrapping row at 400% zoom.",[14,2177,2178,2181,2182,2185,2186,79],{},[31,2179,2180],{},"Reduced motion."," When a flex layout change is animated — a filter chip list collapsing, a toolbar switching density — honour ",[42,2183,2184],{},"prefers-reduced-motion"," by shortening or removing the transition, as shown in ",[18,2187,2189],{"href":2188},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css\u002F","Reducing Motion Preferences in CSS",[81,2191],{},[84,2193,2195],{"id":2194},"devtools-debugging-workflow","DevTools Debugging Workflow",[2197,2198,2199,2211,2228,2234,2240],"ol",{},[38,2200,2201,2204,2205,2207,2208,2210],{},[31,2202,2203],{},"Chrome and Edge:"," open the Elements panel and click the ",[42,2206,449],{}," badge next to the container. The overlay draws each item, the free space and the gaps. In the Styles pane, the flexbox editor icon beside ",[42,2209,44],{}," lets you toggle direction and alignment interactively.",[38,2212,2213,2216,2217,2219,2220,749,2222,2224,2225,2227],{},[31,2214,2215],{},"Read the computed base size."," Select an item and open the Computed pane. If the rendered width differs from your ",[42,2218,1977],{},", look for a ",[42,2221,109],{},[42,2223,449],{}," shorthand higher in the cascade — the Styles pane shows it struck through only when overridden, not when it is outranking ",[42,2226,1977],{}," by algorithm.",[38,2229,2230,2233],{},[31,2231,2232],{},"Firefox:"," the Layout panel's Flexbox section is the best flex debugger available. Select an item and it shows the full sizing chain — base size, whether it grew or shrank and by how much, and which constraint (such as \"minimum size\") stopped it. When an item overflows, this panel names the automatic minimum directly.",[38,2235,2236,2239],{},[31,2237,2238],{},"Safari:"," enable the flex overlay from the Layout sidebar in Web Inspector; it outlines items and free space, which is enough to spot unexpected growth.",[38,2241,2242,2245],{},[31,2243,2244],{},"Test the wrap point."," Use responsive design mode to narrow the viewport slowly and watch the overlay. If the wrap happens at a different width from what you calculated, recount with gaps included — stage two adds them to the line sum.",[81,2247],{},[84,2249,2251],{"id":2250},"browser-compatibility","Browser Compatibility",[413,2253,2254,2270],{},[416,2255,2256],{},[419,2257,2258,2261,2264,2267],{},[422,2259,2260],{},"Feature",[422,2262,2263],{},"Chrome \u002F Edge",[422,2265,2266],{},"Firefox",[422,2268,2269],{},"Safari",[435,2271,2272,2291,2305,2328,2345,2359],{},[419,2273,2274,2284,2287,2289],{},[440,2275,2276,2277,103,2279,103,2281,2283],{},"Flexbox (",[42,2278,44],{},[42,2280,189],{},[42,2282,449],{},")",[440,2285,2286],{},"Universal in current versions",[440,2288,2286],{},[440,2290,2286],{},[419,2292,2293,2298,2301,2303],{},[440,2294,2295,2297],{},[42,2296,521],{}," in flex containers",[440,2299,2300],{},"Supported in all current versions",[440,2302,2300],{},[440,2304,2300],{},[419,2306,2307,2319,2322,2325],{},[440,2308,2309,458,2312,458,2315,2318],{},[42,2310,2311],{},"min()",[42,2313,2314],{},"max()",[42,2316,2317],{},"clamp()"," for bases and gaps",[440,2320,2321],{},"79+",[440,2323,2324],{},"75+",[440,2326,2327],{},"13.1+",[419,2329,2330,2336,2339,2342],{},[440,2331,2332,2335],{},[42,2333,2334],{},"fit-content"," sizing",[440,2337,2338],{},"46+ \u002F 79+",[440,2340,2341],{},"94+",[440,2343,2344],{},"11+",[419,2346,2347,2350,2353,2356],{},[440,2348,2349],{},"Container queries for internal changes",[440,2351,2352],{},"105+",[440,2354,2355],{},"110+",[440,2357,2358],{},"16+",[419,2360,2361,2373,2376,2379],{},[440,2362,2363,458,2366,458,2369,2372],{},[42,2364,2365],{},"dvh",[42,2367,2368],{},"svh",[42,2370,2371],{},"lvh"," for full-height shells",[440,2374,2375],{},"108+",[440,2377,2378],{},"101+",[440,2380,2381],{},"15.4+",[14,2383,2384],{},"Core flexbox needs no fallback in any browser still in meaningful use. The newer pieces used alongside it — viewport units and container queries — degrade by declaring an older value first, as the individual guides show.",[81,2386],{},[84,2388,2390],{"id":2389},"common-pitfalls","Common Pitfalls",[413,2392,2393,2406],{},[416,2394,2395],{},[419,2396,2397,2400,2403],{},[422,2398,2399],{},"Pitfall",[422,2401,2402],{},"Cause",[422,2404,2405],{},"Resolution",[435,2407,2408,2424,2447,2467,2483],{},[419,2409,2410,2413,2416],{},[440,2411,2412],{},"Item overflows its container",[440,2414,2415],{},"Automatic minimum equals min-content width",[440,2417,2418,749,2420,2423],{},[42,2419,1073],{},[42,2421,2422],{},"overflow: hidden"," on the item",[419,2425,2426,2431,2439],{},[440,2427,2428,2430],{},[42,2429,1977],{}," has no effect",[440,2432,2433,2434,2436,2437],{},"A non-auto ",[42,2435,109],{},", often from ",[42,2438,766],{},[440,2440,2441,2442,2444,2445],{},"Size with ",[42,2443,109],{},", or leave the basis ",[42,2446,669],{},[419,2448,2449,2452,2457],{},[440,2450,2451],{},"Last wrapped line stretches",[440,2453,2454,2456],{},[42,2455,102],{}," distributes per line",[440,2458,2459,2460,2463,2464],{},"Cap with ",[42,2461,2462],{},"max-width",", or use grid ",[42,2465,2466],{},"auto-fill",[419,2468,2469,2472,2477],{},[440,2470,2471],{},"Fixed-width sidebar shrinks",[440,2473,2474,2476],{},[42,2475,106],{}," defaults to 1",[440,2478,2479,749,2481],{},[42,2480,752],{},[42,2482,748],{},[419,2484,2485,2488,2493],{},[440,2486,2487],{},"Focus order jumps around",[440,2489,2490,2492],{},[42,2491,728],{}," or a reverse direction",[440,2494,2495],{},"Reorder the DOM instead",[81,2497],{},[84,2499,2501],{"id":2500},"faq","FAQ",[14,2503,2504,2507],{},[31,2505,2506],{},"Should I use flexbox or grid for a row of cards?","\nUse grid when every card must share the same column widths across rows, because grid tracks are shared. Use flexbox when each row can size itself from its content, such as tags or buttons of different lengths, because flex lines are independent.",[14,2509,2510,2513,2514,2516,2517,2519,2520,2522,2523,2525,2526,2528,2529,2531,2532,2534],{},[31,2511,2512],{},"Why does flexbox ignore the width I set on an item?","\nBecause ",[42,2515,109],{}," takes priority over ",[42,2518,1977],{}," whenever it is not ",[42,2521,669],{},", and shorthands like ",[42,2524,766],{}," set it to ",[42,2527,759],{},". Either leave ",[42,2530,109],{}," at ",[42,2533,669],{}," so the width is read, or express the size as the basis directly.",[14,2536,2537,2540,2541,59,2543,2545],{},[31,2538,2539],{},"Can flexbox replace container queries for responsive components?","\nPartly. ",[42,2542,189],{},[42,2544,109],{}," decide when items move onto new lines based on the real container width, with no query. They cannot change typography, spacing or anything besides line breaking, so container queries remain the tool for internal component changes.",[14,2547,2548,2551],{},[31,2549,2550],{},"Is flexbox slower than grid?","\nNot in any way that matters for normal pages. Both are laid out in the same pass. Deeply nested flex containers with content-sized items can require extra measurement passes, so avoid animating properties that change item sizes, which is the real performance risk.",[14,2553,2554,2557,2558,2560,2561,2564,2565,2568],{},[31,2555,2556],{},"How do I stop a flex item overflowing its container?","\nSet ",[42,2559,1073],{}," on the item, or ",[42,2562,2563],{},"overflow"," to anything other than ",[42,2566,2567],{},"visible",". Flex items default to an automatic minimum equal to their min-content size, which long URLs and code blocks make wider than the container.",[84,2570,2572],{"id":2571},"related","Related",[35,2574,2575,2580,2585,2590,2595,2600,2607],{},[38,2576,2577,2579],{},[18,2578,283],{"href":282}," — rows that decide for themselves when to wrap.",[38,2581,2582,2584],{},[18,2583,278],{"href":277}," — the resolution order behind every flex size.",[38,2586,2587,2589],{},[18,2588,287],{"href":286}," — spacing that respects line breaks.",[38,2591,2592,2594],{},[18,2593,297],{"href":296}," — including safe centering for overflow.",[38,2596,2597,2599],{},[18,2598,302],{"href":301}," — pinning a footer on short pages.",[38,2601,2602,2606],{},[18,2603,2605],{"href":2604},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002F","CSS Grid & Subgrid Layouts"," — the two-dimensional counterpart.",[38,2608,2609,2613],{},[18,2610,2612],{"href":2611},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002F","Keyframe Animation Patterns"," — motion for the components flexbox lays out.",[2615,2616,2617],"style",{},"html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}",{"title":790,"searchDepth":807,"depth":807,"links":2619},[2620,2623,2624,2630,2633,2634,2635,2636,2637,2638],{"id":86,"depth":807,"text":87,"children":2621},[2622],{"id":307,"depth":821,"text":308},{"id":410,"depth":807,"text":411},{"id":775,"depth":807,"text":776,"children":2625},[2626,2627,2628,2629],{"id":782,"depth":821,"text":783},{"id":959,"depth":821,"text":960},{"id":1077,"depth":821,"text":1078},{"id":1145,"depth":821,"text":1146},{"id":1196,"depth":807,"text":1197,"children":2631},[2632],{"id":2012,"depth":821,"text":2013},{"id":2119,"depth":807,"text":2120},{"id":2194,"depth":807,"text":2195},{"id":2250,"depth":807,"text":2251},{"id":2389,"depth":807,"text":2390},{"id":2500,"depth":807,"text":2501},{"id":2571,"depth":807,"text":2572},"When flexbox beats grid and container queries: the flex sizing algorithm, wrapping rows, spacing with gap, centering, sticky footers and debugging in DevTools.","md",{"pageTitle":2642,"datePublished":2643,"dateModified":2643,"faq":2644},"Flexbox Layout Patterns for Components","2026-09-18",[2645,2647,2649,2651,2653],{"q":2506,"a":2646},"Use grid when every card must share the same column widths across rows, because grid tracks are shared. Use flexbox when each row can size itself from its content, such as tags or buttons of different lengths, because flex lines are independent.",{"q":2512,"a":2648},"Because flex-basis takes priority over width whenever it is not auto, and shorthands like flex: 1 set it to 0%. Either leave flex-basis at auto so the width is read, or express the size as the basis directly.",{"q":2539,"a":2650},"Partly. flex-wrap and flex-basis decide when items move onto new lines based on the real container width, with no query. They cannot change typography, spacing or anything besides line breaking, so container queries remain the tool for internal component changes.",{"q":2550,"a":2652},"Not in any way that matters for normal pages. Both are laid out in the same pass. Deeply nested flex containers with content-sized items can require extra measurement passes, so avoid animating properties that change item sizes, which is the real performance risk.",{"q":2556,"a":2654},"Set min-width: 0 on the item, or overflow to anything other than visible. Flex items default to an automatic minimum equal to their min-content size, which long URLs and code blocks make wider than the container.","\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns",{"title":5,"description":2639},"mastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Findex","NfF7KA4-1qGYb19m0J5QuO8ZEkzvczaEDaBTcEhzZEg",[2660,2663,2666,2669,2672,2675,2678,2681,2684,2687,2690,2693,2696,2699,2702,2705,2708,2711,2714,2717,2720,2723,2726,2729,2732,2735,2738,2741,2744,2747,2750,2753,2756,2759,2762,2765,2768,2771,2774,2777,2780,2783,2786,2789,2792,2795,2798,2801,2804,2807,2810,2813,2816,2819,2822,2825,2828,2831,2834,2837,2840,2843,2846,2849,2852,2855,2858,2861,2864,2867,2870,2873,2876,2879,2882,2885,2888,2891,2894,2897,2900,2903,2906,2909,2912,2915,2918,2921,2924,2927,2930,2933,2936,2939,2941,2944,2947,2950,2953,2956,2959,2962,2965,2968,2971,2974,2977,2980,2983,2986,2989,2992,2995,2998,3001,3004,3007,3010,3013,3016,3019,3022,3025,3028,3031,3034,3037,3040,3043,3046,3049,3050,3053,3056,3059,3062,3065,3068,3071,3074,3077,3079,3082,3085,3088,3091,3094,3097,3100,3103,3106,3109,3112,3115,3118,3121,3124,3127,3130,3133,3136,3139,3142,3145,3148,3151,3154,3157,3160,3163,3166,3169,3172,3175,3178,3181,3184,3187,3190,3193,3196,3199,3202,3205,3208,3211,3214],{"path":2661,"title":2662},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":2664,"title":2665},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":2667,"title":2668},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":2670,"title":2671},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":2673,"title":2674},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fpause-controls-for-looping-animations","Pause Controls for Looping CSS Animations: Meeting WCAG 2.2.2",{"path":2676,"title":2677},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":2679,"title":2680},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":2682,"title":2683},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":2685,"title":2686},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":2688,"title":2689},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":2691,"title":2692},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fanimated-gradient-borders-with-property","Animated Gradient Borders With @property: A Spinning Highlight Without Extra Elements",{"path":2694,"title":2695},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations","Clip-Path Reveal Animations: Wipes, Irises and Corners Without Extra Markup",{"path":2697,"title":2698},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":2700,"title":2701},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmask-image-fade-edges","Fading Edges With mask-image: Soft Boundaries That Work on Any Background",{"path":2703,"title":2704},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmorphing-shapes-with-clip-path-polygon","Morphing Shapes With clip-path: polygon(): Point-Matched Transitions",{"path":2706,"title":2707},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":2709,"title":2710},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fcolor-mix-hover-states","Hover and Active States With color-mix(): One Token, Every Shade",{"path":2712,"title":2713},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":2715,"title":2716},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Flight-dark-function-for-themes","Light and Dark Themes With light-dark(): One Declaration per Colour",{"path":2718,"title":2719},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":2721,"title":2722},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":2724,"title":2725},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":2727,"title":2728},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":2730,"title":2731},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":2733,"title":2734},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":2736,"title":2737},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":2739,"title":2740},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":2742,"title":2743},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":2745,"title":2746},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":2748,"title":2749},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":2751,"title":2752},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":2754,"title":2755},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":2757,"title":2758},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":2760,"title":2761},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":2763,"title":2764},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":2766,"title":2767},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":2769,"title":2770},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":2772,"title":2773},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":2775,"title":2776},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":2778,"title":2779},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":2781,"title":2782},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":2784,"title":2785},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":2787,"title":2788},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":2790,"title":2791},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":2793,"title":2794},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":2796,"title":2797},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":2799,"title":2800},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Finterpolate-size-for-height-auto-animation","Animating to height: auto With interpolate-size and calc-size()",{"path":2802,"title":2803},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":2805,"title":2806},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":2808,"title":2809},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":2811,"title":2812},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":2814,"title":2815},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":2817,"title":2818},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Flinear-easing-function-for-springs","Spring and Bounce Easing With linear(): Physical Motion Without JavaScript",{"path":2820,"title":2821},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fsteps-easing-for-sprite-animations","steps() Easing: Sprite Sheets, Typewriters and Other Frame-by-Frame Effects",{"path":2823,"title":2824},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":2826,"title":2827},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":2829,"title":2830},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":2832,"title":2833},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":2835,"title":2836},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay","Hover Intent Delays With transition-delay: Menus That Don't Flicker",{"path":2838,"title":2839},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":2841,"title":2842},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":2844,"title":2845},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":2847,"title":2848},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":2850,"title":2851},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":2853,"title":2854},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-fill-mode-explained","animation-fill-mode: What an Animation Applies Before and After It Runs",{"path":2856,"title":2857},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":2859,"title":2860},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":2862,"title":2863},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":2865,"title":2866},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":2868,"title":2869},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":2871,"title":2872},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":2874,"title":2875},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":2877,"title":2878},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":2880,"title":2881},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":2883,"title":2884},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":2886,"title":2887},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":2889,"title":2890},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":2892,"title":2893},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":2895,"title":2896},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":2898,"title":2899},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":2901,"title":2902},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":2904,"title":2905},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":2907,"title":2908},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":2910,"title":2911},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":2913,"title":2914},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":2916,"title":2917},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":2919,"title":2920},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":2922,"title":2923},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":2925,"title":2926},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":2928,"title":2929},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":2931,"title":2932},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":2934,"title":2935},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":2937,"title":2938},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":562,"title":2940},"Modern CSS Layouts & Micro-Interactions",{"path":2942,"title":2943},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":2945,"title":2946},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2948,"title":2949},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":2951,"title":2952},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2954,"title":2955},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2957,"title":2958},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":2960,"title":2961},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":2963,"title":2964},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":2966,"title":2967},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2969,"title":2970},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2972,"title":2973},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2975,"title":2976},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":2978,"title":2979},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":2981,"title":2982},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-queries-inside-css-nesting","Container Queries Inside CSS Nesting: Keeping Responses Next to the Styles They Change",{"path":2984,"title":2985},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":2987,"title":2988},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":2990,"title":2991},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2993,"title":2994},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2996,"title":2997},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools","Debugging Container Queries in DevTools: Why a Rule Doesn't Match",{"path":2999,"title":3000},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":3002,"title":3003},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":3005,"title":3006},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":3008,"title":3009},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":3011,"title":3012},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":3014,"title":3015},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":3017,"title":3018},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts","Responsive Layouts With grid-template-areas: Rearranging Regions by Name",{"path":3020,"title":3021},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":3023,"title":3024},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":3026,"title":3027},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fmasonry-style-layouts-with-grid","Masonry-Style Layouts With the CSS That Ships Today",{"path":3029,"title":3030},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking","Overlapping Elements With Grid Stacking: Layers Without position: absolute",{"path":3032,"title":3033},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":3035,"title":3036},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fcentering-in-css-every-method","Centering in CSS: Every Modern Method and When Each One Breaks",{"path":3038,"title":3039},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-basis-vs-width","flex-basis vs width: Which Size a Flex Item Actually Starts From",{"path":3041,"title":3042},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":3044,"title":3045},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":3047,"title":3048},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2655,"title":5},{"path":3051,"title":3052},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid","Sticky Footer With Flexbox or Grid: Pinning the Footer on Short Pages",{"path":3054,"title":3055},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":3057,"title":3058},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":3060,"title":3061},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-line-height-and-measure","Fluid Line Height and Measure: Keeping Text Readable as It Scales",{"path":3063,"title":3064},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":3066,"title":3067},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":3069,"title":3070},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":3072,"title":3073},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":3075,"title":3076},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ftext-wrap-balance-and-pretty","text-wrap: balance and pretty: Better Line Breaks Without Manual Breaks",{"path":3078,"title":26},"\u002Fmastering-container-queries-responsive-layouts",{"path":3080,"title":3081},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":3083,"title":3084},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fcontent-visibility-and-contain-intrinsic-size","content-visibility and contain-intrinsic-size: Rendering Only What Is Near the Screen",{"path":3086,"title":3087},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":3089,"title":3090},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Flayout-widths-with-min-max-clamp","Layout Widths With min(), max() and clamp(): Sizing Without Breakpoints",{"path":3092,"title":3093},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":3095,"title":3096},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":3098,"title":3099},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":3101,"title":3102},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":3104,"title":3105},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":3107,"title":3108},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":3110,"title":3111},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":3113,"title":3114},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Frevert-layer-and-revert-keywords","initial, inherit, unset, revert and revert-layer: Undoing Styles Correctly",{"path":3116,"title":3117},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":3119,"title":3120},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fcontent-aware-card-layouts-with-has","Content-Aware Card Layouts With :has(): One Component, Many Shapes",{"path":3122,"title":3123},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":3125,"title":3126},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fform-validation-layouts-with-has","Form Validation Layouts With :has(): Styling Groups From Field State",{"path":3128,"title":3129},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-selector-performance",":has() Selector Performance: What Is Cheap, What Is Not, and How to Measure",{"path":3131,"title":3132},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-vs-container-style-queries",":has() vs Container Style Queries: Discovered State and Published State",{"path":3134,"title":3135},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":3137,"title":3138},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fquantity-queries-with-has","Quantity Queries With :has(): Layouts That Respond to How Many Items There Are",{"path":3140,"title":3141},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":3143,"title":3144},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":3146,"title":3147},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":3149,"title":3150},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":3152,"title":3153},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":3155,"title":3156},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":3158,"title":3159},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":3161,"title":3162},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":3164,"title":3165},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":3167,"title":3168},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":3170,"title":3171},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fhorizontal-scrolling-card-rows","Horizontal Scrolling Card Rows: Swipeable Lists That Stay in Their Lane",{"path":3173,"title":3174},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":3176,"title":3177},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Foverscroll-behavior-for-nested-scrolling","overscroll-behavior: Taming Nested Scrolling, Pull-to-Refresh and Back-Swipe",{"path":3179,"title":3180},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fscroll-margin-and-scroll-padding-for-sticky-headers","scroll-margin and scroll-padding: Keeping Targets Clear of Sticky Headers",{"path":3182,"title":3183},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":3185,"title":3186},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":3188,"title":3189},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":3191,"title":3192},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":3194,"title":3195},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":3197,"title":3198},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",{"path":3200,"title":3201},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fdvh-svh-lvh-mobile-viewport-units","dvh, svh and lvh: Choosing the Right Mobile Viewport Unit",{"path":3203,"title":3204},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts","Full-Bleed Sections in a Constrained Layout: Breaking Out Without Breaking the Page",{"path":3206,"title":3207},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":3209,"title":3210},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fsafe-area-insets-for-notched-screens","Safe Area Insets: Designing Around Notches, Corners and Home Indicators",{"path":3212,"title":3213},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fviewport-units-vs-container-units","Viewport Units vs Container Units: Choosing the Right Reference Box",{"path":3215,"title":3216},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":3218,"caption":3219,"height":3220,"resizable":863,"html":3221,"css":3222},"Comment card laid out by flexbox","Narrow the frame: Reply wraps first, then the body drops under the avatar, and the long link wraps rather than widening the card.",240,"\n\u003Carticle class=\"comment\">\n  \u003Cdiv class=\"comment__inner\">\n    \u003Cspan class=\"comment__avatar\" aria-hidden=\"true\">\u003C\u002Fspan>\n    \u003Cdiv class=\"comment__body\">\n      \u003Ch3 class=\"comment__author\">Lena Okafor\u003C\u002Fh3>\n      \u003Cp class=\"comment__text\">The fix was min-width: 0 on the flex item — https:\u002F\u002Fexample.com\u002Fa\u002Fvery\u002Flong\u002Flink\u002Fthat\u002Fused\u002Fto\u002Foverflow\u003C\u002Fp>\n    \u003C\u002Fdiv>\n    \u003Cbutton class=\"comment__reply\" type=\"button\">Reply\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Farticle>","\n.comment { container-type: inline-size; }\n.comment__inner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 0.75rem 1rem;\n  padding: 1rem;\n  border: 1px solid var(--demo-border);\n  border-radius: 12px;\n}\n.comment__avatar {\n  flex: none;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  background: var(--demo-accent);\n}\n.comment__body { flex: 1 1 16rem; min-width: 0; }\n.comment__author { margin: 0; font-size: 1rem; }\n.comment__text { margin: 0.25rem 0 0; overflow-wrap: anywhere; }\n.comment__reply {\n  margin-inline-start: auto;\n  padding: 0.4rem 0.8rem;\n  border: 1px solid var(--demo-border);\n  border-radius: 6px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n.comment__reply:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; }\n@container (width > 36rem) {\n  .comment__author { font-size: 1.125rem; }\n  .comment__avatar { width: 3.5rem; height: 3.5rem; }\n}",1789717745489]