[{"data":1,"prerenderedAt":1544},["ShallowReactive",2],{"guide-flexbox-common-patterns":3},{"id":4,"title":5,"body":6,"date":1536,"description":1537,"extension":1538,"meta":1539,"navigation":106,"path":1540,"readingTime":103,"seo":1541,"stem":1542,"__hash__":1543},"guides\u002Fguides\u002Fflexbox-common-patterns.md","12 Essential Flexbox Layout Patterns",{"type":7,"value":8,"toc":1518},"minimark",[9,14,23,27,139,146,150,235,238,242,361,364,368,456,459,463,539,542,546,668,675,679,746,749,753,846,849,853,902,905,909,1020,1027,1031,1146,1149,1153,1289,1292,1296,1458,1462,1501,1505,1514],[10,11,13],"h2",{"id":12},"why-patterns-matter","Why Patterns Matter",[15,16,17,18,22],"p",{},"Learning Flexbox properties in isolation is like learning vocabulary without grammar. The real skill is combining ",[19,20,21],"code",{},"display: flex"," with the right alignment, direction, and wrapping properties to solve recurring layout problems. These 12 patterns cover the layouts you build most often.",[10,24,26],{"id":25},"_1-horizontal-navigation-bar","1. Horizontal Navigation Bar",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-css shiki shiki-themes github-light github-dark",".nav {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n}\n\n.nav-spacer {\n  flex: 1; \u002F* Pushes everything after to the right *\u002F\n}\n","css","",[19,35,36,49,65,78,95,101,108,116,134],{"__ignoreMap":33},[37,38,41,45],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sScJk",".nav",[37,46,48],{"class":47},"sVt8B"," {\n",[37,50,52,56,59,62],{"class":39,"line":51},2,[37,53,55],{"class":54},"sj4cs","  display",[37,57,58],{"class":47},": ",[37,60,61],{"class":54},"flex",[37,63,64],{"class":47},";\n",[37,66,68,71,73,76],{"class":39,"line":67},3,[37,69,70],{"class":54},"  align-items",[37,72,58],{"class":47},[37,74,75],{"class":54},"center",[37,77,64],{"class":47},[37,79,81,84,86,89,93],{"class":39,"line":80},4,[37,82,83],{"class":54},"  gap",[37,85,58],{"class":47},[37,87,88],{"class":54},"24",[37,90,92],{"class":91},"szBVR","px",[37,94,64],{"class":47},[37,96,98],{"class":39,"line":97},5,[37,99,100],{"class":47},"}\n",[37,102,104],{"class":39,"line":103},6,[37,105,107],{"emptyLinePlaceholder":106},true,"\n",[37,109,111,114],{"class":39,"line":110},7,[37,112,113],{"class":43},".nav-spacer",[37,115,48],{"class":47},[37,117,119,122,124,127,130],{"class":39,"line":118},8,[37,120,121],{"class":54},"  flex",[37,123,58],{"class":47},[37,125,126],{"class":54},"1",[37,128,129],{"class":47},"; ",[37,131,133],{"class":132},"sJ8bj","\u002F* Pushes everything after to the right *\u002F\n",[37,135,137],{"class":39,"line":136},9,[37,138,100],{"class":47},[15,140,141,142,145],{},"Place a spacer element between the logo and menu items. ",[19,143,144],{},"flex: 1"," makes it consume all free space, pushing subsequent items to the far right.",[10,147,149],{"id":148},"_2-centered-hero-section","2. Centered Hero Section",[28,151,153],{"className":30,"code":152,"language":32,"meta":33,"style":33},".hero {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  text-align: center;\n}\n",[19,154,155,162,172,184,194,205,220,231],{"__ignoreMap":33},[37,156,157,160],{"class":39,"line":40},[37,158,159],{"class":43},".hero",[37,161,48],{"class":47},[37,163,164,166,168,170],{"class":39,"line":51},[37,165,55],{"class":54},[37,167,58],{"class":47},[37,169,61],{"class":54},[37,171,64],{"class":47},[37,173,174,177,179,182],{"class":39,"line":67},[37,175,176],{"class":54},"  flex-direction",[37,178,58],{"class":47},[37,180,181],{"class":54},"column",[37,183,64],{"class":47},[37,185,186,188,190,192],{"class":39,"line":80},[37,187,70],{"class":54},[37,189,58],{"class":47},[37,191,75],{"class":54},[37,193,64],{"class":47},[37,195,196,199,201,203],{"class":39,"line":97},[37,197,198],{"class":54},"  justify-content",[37,200,58],{"class":47},[37,202,75],{"class":54},[37,204,64],{"class":47},[37,206,207,210,212,215,218],{"class":39,"line":103},[37,208,209],{"class":54},"  min-height",[37,211,58],{"class":47},[37,213,214],{"class":54},"100",[37,216,217],{"class":91},"vh",[37,219,64],{"class":47},[37,221,222,225,227,229],{"class":39,"line":110},[37,223,224],{"class":54},"  text-align",[37,226,58],{"class":47},[37,228,75],{"class":54},[37,230,64],{"class":47},[37,232,233],{"class":39,"line":118},[37,234,100],{"class":47},[15,236,237],{},"Column direction stacks heading, subtext, and button vertically. Both alignment properties center the group.",[10,239,241],{"id":240},"_3-card-row","3. Card Row",[28,243,245],{"className":30,"code":244,"language":32,"meta":33,"style":33},".card-row {\n  display: flex;\n  gap: 24px;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n}\n\n.card-row > * {\n  flex: 0 0 300px;\n  scroll-snap-align: start;\n}\n",[19,246,247,254,264,276,288,303,307,311,324,343,356],{"__ignoreMap":33},[37,248,249,252],{"class":39,"line":40},[37,250,251],{"class":43},".card-row",[37,253,48],{"class":47},[37,255,256,258,260,262],{"class":39,"line":51},[37,257,55],{"class":54},[37,259,58],{"class":47},[37,261,61],{"class":54},[37,263,64],{"class":47},[37,265,266,268,270,272,274],{"class":39,"line":67},[37,267,83],{"class":54},[37,269,58],{"class":47},[37,271,88],{"class":54},[37,273,92],{"class":91},[37,275,64],{"class":47},[37,277,278,281,283,286],{"class":39,"line":80},[37,279,280],{"class":54},"  overflow-x",[37,282,58],{"class":47},[37,284,285],{"class":54},"auto",[37,287,64],{"class":47},[37,289,290,293,295,298,301],{"class":39,"line":97},[37,291,292],{"class":54},"  scroll-snap-type",[37,294,58],{"class":47},[37,296,297],{"class":54},"x",[37,299,300],{"class":54}," mandatory",[37,302,64],{"class":47},[37,304,305],{"class":39,"line":103},[37,306,100],{"class":47},[37,308,309],{"class":39,"line":110},[37,310,107],{"emptyLinePlaceholder":106},[37,312,313,315,318,322],{"class":39,"line":118},[37,314,251],{"class":43},[37,316,317],{"class":91}," >",[37,319,321],{"class":320},"s9eBZ"," *",[37,323,48],{"class":47},[37,325,326,328,330,333,336,339,341],{"class":39,"line":136},[37,327,121],{"class":54},[37,329,58],{"class":47},[37,331,332],{"class":54},"0",[37,334,335],{"class":54}," 0",[37,337,338],{"class":54}," 300",[37,340,92],{"class":91},[37,342,64],{"class":47},[37,344,346,349,351,354],{"class":39,"line":345},10,[37,347,348],{"class":54},"  scroll-snap-align",[37,350,58],{"class":47},[37,352,353],{"class":54},"start",[37,355,64],{"class":47},[37,357,359],{"class":39,"line":358},11,[37,360,100],{"class":47},[15,362,363],{},"Fixed-width cards with horizontal scroll and snap. Ideal for product carousels on mobile.",[10,365,367],{"id":366},"_4-equal-height-card-grid","4. Equal-Height Card Grid",[28,369,371],{"className":30,"code":370,"language":32,"meta":33,"style":33},".card-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n}\n\n.card-grid > * {\n  flex: 1 1 300px; \u002F* Grow, shrink, min 300px *\u002F\n}\n",[19,372,373,380,390,402,414,418,422,432,452],{"__ignoreMap":33},[37,374,375,378],{"class":39,"line":40},[37,376,377],{"class":43},".card-grid",[37,379,48],{"class":47},[37,381,382,384,386,388],{"class":39,"line":51},[37,383,55],{"class":54},[37,385,58],{"class":47},[37,387,61],{"class":54},[37,389,64],{"class":47},[37,391,392,395,397,400],{"class":39,"line":67},[37,393,394],{"class":54},"  flex-wrap",[37,396,58],{"class":47},[37,398,399],{"class":54},"wrap",[37,401,64],{"class":47},[37,403,404,406,408,410,412],{"class":39,"line":80},[37,405,83],{"class":54},[37,407,58],{"class":47},[37,409,88],{"class":54},[37,411,92],{"class":91},[37,413,64],{"class":47},[37,415,416],{"class":39,"line":97},[37,417,100],{"class":47},[37,419,420],{"class":39,"line":103},[37,421,107],{"emptyLinePlaceholder":106},[37,423,424,426,428,430],{"class":39,"line":110},[37,425,377],{"class":43},[37,427,317],{"class":91},[37,429,321],{"class":320},[37,431,48],{"class":47},[37,433,434,436,438,440,443,445,447,449],{"class":39,"line":118},[37,435,121],{"class":54},[37,437,58],{"class":47},[37,439,126],{"class":54},[37,441,442],{"class":54}," 1",[37,444,338],{"class":54},[37,446,92],{"class":91},[37,448,129],{"class":47},[37,450,451],{"class":132},"\u002F* Grow, shrink, min 300px *\u002F\n",[37,453,454],{"class":39,"line":136},[37,455,100],{"class":47},[15,457,458],{},"Cards grow to fill the row equally. On narrow screens, they wrap to single column. No media queries needed.",[10,460,462],{"id":461},"_5-sticky-footer","5. Sticky Footer",[28,464,466],{"className":30,"code":465,"language":32,"meta":33,"style":33},".page {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.page-content {\n  flex: 1; \u002F* Pushes footer to the bottom *\u002F\n}\n",[19,467,468,475,485,495,507,511,515,522,535],{"__ignoreMap":33},[37,469,470,473],{"class":39,"line":40},[37,471,472],{"class":43},".page",[37,474,48],{"class":47},[37,476,477,479,481,483],{"class":39,"line":51},[37,478,55],{"class":54},[37,480,58],{"class":47},[37,482,61],{"class":54},[37,484,64],{"class":47},[37,486,487,489,491,493],{"class":39,"line":67},[37,488,176],{"class":54},[37,490,58],{"class":47},[37,492,181],{"class":54},[37,494,64],{"class":47},[37,496,497,499,501,503,505],{"class":39,"line":80},[37,498,209],{"class":54},[37,500,58],{"class":47},[37,502,214],{"class":54},[37,504,217],{"class":91},[37,506,64],{"class":47},[37,508,509],{"class":39,"line":97},[37,510,100],{"class":47},[37,512,513],{"class":39,"line":103},[37,514,107],{"emptyLinePlaceholder":106},[37,516,517,520],{"class":39,"line":110},[37,518,519],{"class":43},".page-content",[37,521,48],{"class":47},[37,523,524,526,528,530,532],{"class":39,"line":118},[37,525,121],{"class":54},[37,527,58],{"class":47},[37,529,126],{"class":54},[37,531,129],{"class":47},[37,533,534],{"class":132},"\u002F* Pushes footer to the bottom *\u002F\n",[37,536,537],{"class":39,"line":136},[37,538,100],{"class":47},[15,540,541],{},"Content expands to fill available space, keeping the footer at the viewport bottom even when content is short.",[10,543,545],{"id":544},"_6-holy-grail-layout","6. Holy Grail Layout",[28,547,549],{"className":30,"code":548,"language":32,"meta":33,"style":33},".holy-grail {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.holy-grail > nav    { flex: 1 1 200px; }\n.holy-grail > main   { flex: 3 1 400px; }\n.holy-grail > aside  { flex: 1 1 200px; }\n",[19,550,551,558,568,578,582,586,614,642],{"__ignoreMap":33},[37,552,553,556],{"class":39,"line":40},[37,554,555],{"class":43},".holy-grail",[37,557,48],{"class":47},[37,559,560,562,564,566],{"class":39,"line":51},[37,561,55],{"class":54},[37,563,58],{"class":47},[37,565,61],{"class":54},[37,567,64],{"class":47},[37,569,570,572,574,576],{"class":39,"line":67},[37,571,394],{"class":54},[37,573,58],{"class":47},[37,575,399],{"class":54},[37,577,64],{"class":47},[37,579,580],{"class":39,"line":80},[37,581,100],{"class":47},[37,583,584],{"class":39,"line":97},[37,585,107],{"emptyLinePlaceholder":106},[37,587,588,590,592,595,598,600,602,604,606,609,611],{"class":39,"line":103},[37,589,555],{"class":43},[37,591,317],{"class":91},[37,593,594],{"class":320}," nav",[37,596,597],{"class":47},"    { ",[37,599,61],{"class":54},[37,601,58],{"class":47},[37,603,126],{"class":54},[37,605,442],{"class":54},[37,607,608],{"class":54}," 200",[37,610,92],{"class":91},[37,612,613],{"class":47},"; }\n",[37,615,616,618,620,623,626,628,630,633,635,638,640],{"class":39,"line":110},[37,617,555],{"class":43},[37,619,317],{"class":91},[37,621,622],{"class":320}," main",[37,624,625],{"class":47},"   { ",[37,627,61],{"class":54},[37,629,58],{"class":47},[37,631,632],{"class":54},"3",[37,634,442],{"class":54},[37,636,637],{"class":54}," 400",[37,639,92],{"class":91},[37,641,613],{"class":47},[37,643,644,646,648,651,654,656,658,660,662,664,666],{"class":39,"line":118},[37,645,555],{"class":43},[37,647,317],{"class":91},[37,649,650],{"class":320}," aside",[37,652,653],{"class":47},"  { ",[37,655,61],{"class":54},[37,657,58],{"class":47},[37,659,126],{"class":54},[37,661,442],{"class":54},[37,663,608],{"class":54},[37,665,92],{"class":91},[37,667,613],{"class":47},[15,669,670,671,674],{},"On wide screens, the three columns sit side-by-side with ",[19,672,673],{},"main"," taking triple the space. On narrow screens, they stack naturally via wrapping.",[10,676,678],{"id":677},"_7-media-object","7. Media Object",[28,680,682],{"className":30,"code":681,"language":32,"meta":33,"style":33},".media {\n  display: flex;\n  gap: 16px;\n}\n\n.media-body {\n  flex: 1; \u002F* Text takes remaining space *\u002F\n}\n",[19,683,684,691,701,714,718,722,729,742],{"__ignoreMap":33},[37,685,686,689],{"class":39,"line":40},[37,687,688],{"class":43},".media",[37,690,48],{"class":47},[37,692,693,695,697,699],{"class":39,"line":51},[37,694,55],{"class":54},[37,696,58],{"class":47},[37,698,61],{"class":54},[37,700,64],{"class":47},[37,702,703,705,707,710,712],{"class":39,"line":67},[37,704,83],{"class":54},[37,706,58],{"class":47},[37,708,709],{"class":54},"16",[37,711,92],{"class":91},[37,713,64],{"class":47},[37,715,716],{"class":39,"line":80},[37,717,100],{"class":47},[37,719,720],{"class":39,"line":97},[37,721,107],{"emptyLinePlaceholder":106},[37,723,724,727],{"class":39,"line":103},[37,725,726],{"class":43},".media-body",[37,728,48],{"class":47},[37,730,731,733,735,737,739],{"class":39,"line":110},[37,732,121],{"class":54},[37,734,58],{"class":47},[37,736,126],{"class":54},[37,738,129],{"class":47},[37,740,741],{"class":132},"\u002F* Text takes remaining space *\u002F\n",[37,743,744],{"class":39,"line":118},[37,745,100],{"class":47},[15,747,748],{},"Avatar on the left, content on the right. The content area grows to fill available width while the image stays fixed.",[10,750,752],{"id":751},"_8-input-group","8. Input Group",[28,754,756],{"className":30,"code":755,"language":32,"meta":33,"style":33},".input-group {\n  display: flex;\n}\n\n.input-group input {\n  flex: 1;\n  border-radius: 0;\n}\n\n.input-group button {\n  flex-shrink: 0;\n}\n",[19,757,758,765,775,779,783,792,802,813,817,821,830,841],{"__ignoreMap":33},[37,759,760,763],{"class":39,"line":40},[37,761,762],{"class":43},".input-group",[37,764,48],{"class":47},[37,766,767,769,771,773],{"class":39,"line":51},[37,768,55],{"class":54},[37,770,58],{"class":47},[37,772,61],{"class":54},[37,774,64],{"class":47},[37,776,777],{"class":39,"line":67},[37,778,100],{"class":47},[37,780,781],{"class":39,"line":80},[37,782,107],{"emptyLinePlaceholder":106},[37,784,785,787,790],{"class":39,"line":97},[37,786,762],{"class":43},[37,788,789],{"class":320}," input",[37,791,48],{"class":47},[37,793,794,796,798,800],{"class":39,"line":103},[37,795,121],{"class":54},[37,797,58],{"class":47},[37,799,126],{"class":54},[37,801,64],{"class":47},[37,803,804,807,809,811],{"class":39,"line":110},[37,805,806],{"class":54},"  border-radius",[37,808,58],{"class":47},[37,810,332],{"class":54},[37,812,64],{"class":47},[37,814,815],{"class":39,"line":118},[37,816,100],{"class":47},[37,818,819],{"class":39,"line":136},[37,820,107],{"emptyLinePlaceholder":106},[37,822,823,825,828],{"class":39,"line":345},[37,824,762],{"class":43},[37,826,827],{"class":320}," button",[37,829,48],{"class":47},[37,831,832,835,837,839],{"class":39,"line":358},[37,833,834],{"class":54},"  flex-shrink",[37,836,58],{"class":47},[37,838,332],{"class":54},[37,840,64],{"class":47},[37,842,844],{"class":39,"line":843},12,[37,845,100],{"class":47},[15,847,848],{},"Text input stretches to fill space. Button stays at its natural width. Remove individual border-radii and apply them to the group container instead.",[10,850,852],{"id":851},"_9-tag-list","9. Tag List",[28,854,856],{"className":30,"code":855,"language":32,"meta":33,"style":33},".tag-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n",[19,857,858,865,875,885,898],{"__ignoreMap":33},[37,859,860,863],{"class":39,"line":40},[37,861,862],{"class":43},".tag-list",[37,864,48],{"class":47},[37,866,867,869,871,873],{"class":39,"line":51},[37,868,55],{"class":54},[37,870,58],{"class":47},[37,872,61],{"class":54},[37,874,64],{"class":47},[37,876,877,879,881,883],{"class":39,"line":67},[37,878,394],{"class":54},[37,880,58],{"class":47},[37,882,399],{"class":54},[37,884,64],{"class":47},[37,886,887,889,891,894,896],{"class":39,"line":80},[37,888,83],{"class":54},[37,890,58],{"class":47},[37,892,893],{"class":54},"8",[37,895,92],{"class":91},[37,897,64],{"class":47},[37,899,900],{"class":39,"line":97},[37,901,100],{"class":47},[15,903,904],{},"Tags flow horizontally and wrap to new lines. Simple and endlessly reusable for filters, labels, and skill lists.",[10,906,908],{"id":907},"_10-sidebar-content","10. Sidebar + Content",[28,910,912],{"className":30,"code":911,"language":32,"meta":33,"style":33},".layout {\n  display: flex;\n  gap: 32px;\n}\n\n.sidebar {\n  flex: 0 0 260px;\n}\n\n.content {\n  flex: 1;\n  min-width: 0; \u002F* Prevent overflow from long text *\u002F\n}\n",[19,913,914,921,931,944,948,952,959,976,980,984,991,1001,1015],{"__ignoreMap":33},[37,915,916,919],{"class":39,"line":40},[37,917,918],{"class":43},".layout",[37,920,48],{"class":47},[37,922,923,925,927,929],{"class":39,"line":51},[37,924,55],{"class":54},[37,926,58],{"class":47},[37,928,61],{"class":54},[37,930,64],{"class":47},[37,932,933,935,937,940,942],{"class":39,"line":67},[37,934,83],{"class":54},[37,936,58],{"class":47},[37,938,939],{"class":54},"32",[37,941,92],{"class":91},[37,943,64],{"class":47},[37,945,946],{"class":39,"line":80},[37,947,100],{"class":47},[37,949,950],{"class":39,"line":97},[37,951,107],{"emptyLinePlaceholder":106},[37,953,954,957],{"class":39,"line":103},[37,955,956],{"class":43},".sidebar",[37,958,48],{"class":47},[37,960,961,963,965,967,969,972,974],{"class":39,"line":110},[37,962,121],{"class":54},[37,964,58],{"class":47},[37,966,332],{"class":54},[37,968,335],{"class":54},[37,970,971],{"class":54}," 260",[37,973,92],{"class":91},[37,975,64],{"class":47},[37,977,978],{"class":39,"line":118},[37,979,100],{"class":47},[37,981,982],{"class":39,"line":136},[37,983,107],{"emptyLinePlaceholder":106},[37,985,986,989],{"class":39,"line":345},[37,987,988],{"class":43},".content",[37,990,48],{"class":47},[37,992,993,995,997,999],{"class":39,"line":358},[37,994,121],{"class":54},[37,996,58],{"class":47},[37,998,126],{"class":54},[37,1000,64],{"class":47},[37,1002,1003,1006,1008,1010,1012],{"class":39,"line":843},[37,1004,1005],{"class":54},"  min-width",[37,1007,58],{"class":47},[37,1009,332],{"class":54},[37,1011,129],{"class":47},[37,1013,1014],{"class":132},"\u002F* Prevent overflow from long text *\u002F\n",[37,1016,1018],{"class":39,"line":1017},13,[37,1019,100],{"class":47},[15,1021,1022,1023,1026],{},"Fixed sidebar width, fluid content. ",[19,1024,1025],{},"min-width: 0"," on content prevents flex items from overflowing their container with long unbroken text.",[10,1028,1030],{"id":1029},"_11-stacked-form","11. Stacked Form",[28,1032,1034],{"className":30,"code":1033,"language":32,"meta":33,"style":33},".form-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.form-row {\n  display: flex;\n  gap: 12px;\n}\n\n.form-row > * {\n  flex: 1;\n}\n",[19,1035,1036,1043,1053,1063,1075,1079,1083,1090,1100,1113,1117,1121,1131,1141],{"__ignoreMap":33},[37,1037,1038,1041],{"class":39,"line":40},[37,1039,1040],{"class":43},".form-stack",[37,1042,48],{"class":47},[37,1044,1045,1047,1049,1051],{"class":39,"line":51},[37,1046,55],{"class":54},[37,1048,58],{"class":47},[37,1050,61],{"class":54},[37,1052,64],{"class":47},[37,1054,1055,1057,1059,1061],{"class":39,"line":67},[37,1056,176],{"class":54},[37,1058,58],{"class":47},[37,1060,181],{"class":54},[37,1062,64],{"class":47},[37,1064,1065,1067,1069,1071,1073],{"class":39,"line":80},[37,1066,83],{"class":54},[37,1068,58],{"class":47},[37,1070,709],{"class":54},[37,1072,92],{"class":91},[37,1074,64],{"class":47},[37,1076,1077],{"class":39,"line":97},[37,1078,100],{"class":47},[37,1080,1081],{"class":39,"line":103},[37,1082,107],{"emptyLinePlaceholder":106},[37,1084,1085,1088],{"class":39,"line":110},[37,1086,1087],{"class":43},".form-row",[37,1089,48],{"class":47},[37,1091,1092,1094,1096,1098],{"class":39,"line":118},[37,1093,55],{"class":54},[37,1095,58],{"class":47},[37,1097,61],{"class":54},[37,1099,64],{"class":47},[37,1101,1102,1104,1106,1109,1111],{"class":39,"line":136},[37,1103,83],{"class":54},[37,1105,58],{"class":47},[37,1107,1108],{"class":54},"12",[37,1110,92],{"class":91},[37,1112,64],{"class":47},[37,1114,1115],{"class":39,"line":345},[37,1116,100],{"class":47},[37,1118,1119],{"class":39,"line":358},[37,1120,107],{"emptyLinePlaceholder":106},[37,1122,1123,1125,1127,1129],{"class":39,"line":843},[37,1124,1087],{"class":43},[37,1126,317],{"class":91},[37,1128,321],{"class":320},[37,1130,48],{"class":47},[37,1132,1133,1135,1137,1139],{"class":39,"line":1017},[37,1134,121],{"class":54},[37,1136,58],{"class":47},[37,1138,126],{"class":54},[37,1140,64],{"class":47},[37,1142,1144],{"class":39,"line":1143},14,[37,1145,100],{"class":47},[15,1147,1148],{},"Vertical stack for the overall form, horizontal split for inline fields (first name + last name).",[10,1150,1152],{"id":1151},"_12-modal-overlay","12. Modal Overlay",[28,1154,1156],{"className":30,"code":1155,"language":32,"meta":33,"style":33},".overlay {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.modal {\n  flex: 0 1 500px; \u002F* Max 500px, shrinks on small screens *\u002F\n}\n",[19,1157,1158,1165,1175,1185,1195,1207,1218,1250,1254,1258,1265,1285],{"__ignoreMap":33},[37,1159,1160,1163],{"class":39,"line":40},[37,1161,1162],{"class":43},".overlay",[37,1164,48],{"class":47},[37,1166,1167,1169,1171,1173],{"class":39,"line":51},[37,1168,55],{"class":54},[37,1170,58],{"class":47},[37,1172,61],{"class":54},[37,1174,64],{"class":47},[37,1176,1177,1179,1181,1183],{"class":39,"line":67},[37,1178,70],{"class":54},[37,1180,58],{"class":47},[37,1182,75],{"class":54},[37,1184,64],{"class":47},[37,1186,1187,1189,1191,1193],{"class":39,"line":80},[37,1188,198],{"class":54},[37,1190,58],{"class":47},[37,1192,75],{"class":54},[37,1194,64],{"class":47},[37,1196,1197,1200,1202,1205],{"class":39,"line":97},[37,1198,1199],{"class":54},"  position",[37,1201,58],{"class":47},[37,1203,1204],{"class":54},"fixed",[37,1206,64],{"class":47},[37,1208,1209,1212,1214,1216],{"class":39,"line":103},[37,1210,1211],{"class":54},"  inset",[37,1213,58],{"class":47},[37,1215,332],{"class":54},[37,1217,64],{"class":47},[37,1219,1220,1223,1225,1228,1231,1233,1236,1238,1240,1242,1244,1247],{"class":39,"line":110},[37,1221,1222],{"class":54},"  background",[37,1224,58],{"class":47},[37,1226,1227],{"class":54},"rgba",[37,1229,1230],{"class":47},"(",[37,1232,332],{"class":54},[37,1234,1235],{"class":47},", ",[37,1237,332],{"class":54},[37,1239,1235],{"class":47},[37,1241,332],{"class":54},[37,1243,1235],{"class":47},[37,1245,1246],{"class":54},"0.5",[37,1248,1249],{"class":47},");\n",[37,1251,1252],{"class":39,"line":118},[37,1253,100],{"class":47},[37,1255,1256],{"class":39,"line":136},[37,1257,107],{"emptyLinePlaceholder":106},[37,1259,1260,1263],{"class":39,"line":345},[37,1261,1262],{"class":43},".modal",[37,1264,48],{"class":47},[37,1266,1267,1269,1271,1273,1275,1278,1280,1282],{"class":39,"line":358},[37,1268,121],{"class":54},[37,1270,58],{"class":47},[37,1272,332],{"class":54},[37,1274,442],{"class":54},[37,1276,1277],{"class":54}," 500",[37,1279,92],{"class":91},[37,1281,129],{"class":47},[37,1283,1284],{"class":132},"\u002F* Max 500px, shrinks on small screens *\u002F\n",[37,1286,1287],{"class":39,"line":843},[37,1288,100],{"class":47},[15,1290,1291],{},"The overlay fills the viewport and centers the modal. The modal caps at 500px but shrinks gracefully on narrow viewports.",[10,1293,1295],{"id":1294},"quick-reference-table","Quick Reference Table",[1297,1298,1299,1312],"table",{},[1300,1301,1302],"thead",{},[1303,1304,1305,1309],"tr",{},[1306,1307,1308],"th",{},"Pattern",[1306,1310,1311],{},"Key Properties",[1313,1314,1315,1329,1342,1355,1368,1379,1389,1400,1414,1426,1439,1447],"tbody",{},[1303,1316,1317,1321],{},[1318,1319,1320],"td",{},"Nav bar",[1318,1322,1323,1325,1326],{},[19,1324,144],{}," spacer, ",[19,1327,1328],{},"align-items: center",[1303,1330,1331,1334],{},[1318,1332,1333],{},"Hero",[1318,1335,1336,1235,1339],{},[19,1337,1338],{},"flex-direction: column",[19,1340,1341],{},"justify-content: center",[1303,1343,1344,1347],{},[1318,1345,1346],{},"Card row",[1318,1348,1349,1235,1352],{},[19,1350,1351],{},"flex: 0 0 Npx",[19,1353,1354],{},"overflow-x: auto",[1303,1356,1357,1360],{},[1318,1358,1359],{},"Card grid",[1318,1361,1362,1235,1365],{},[19,1363,1364],{},"flex-wrap: wrap",[19,1366,1367],{},"flex: 1 1 Npx",[1303,1369,1370,1373],{},[1318,1371,1372],{},"Sticky footer",[1318,1374,1375,1376,1378],{},"Column direction, ",[19,1377,144],{}," on content",[1303,1380,1381,1384],{},[1318,1382,1383],{},"Holy grail",[1318,1385,1386,1388],{},[19,1387,1364],{},", proportional flex values",[1303,1390,1391,1394],{},[1318,1392,1393],{},"Media object",[1318,1395,1396,1397,1399],{},"Fixed image, ",[19,1398,144],{}," on body",[1303,1401,1402,1405],{},[1318,1403,1404],{},"Input group",[1318,1406,1407,1409,1410,1413],{},[19,1408,144],{}," on input, ",[19,1411,1412],{},"flex-shrink: 0"," on button",[1303,1415,1416,1419],{},[1318,1417,1418],{},"Tag list",[1318,1420,1421,1235,1423],{},[19,1422,1364],{},[19,1424,1425],{},"gap",[1303,1427,1428,1431],{},[1318,1429,1430],{},"Sidebar + content",[1318,1432,1433,1434,1436,1437,1378],{},"Fixed sidebar, ",[19,1435,144],{}," + ",[19,1438,1025],{},[1303,1440,1441,1444],{},[1318,1442,1443],{},"Stacked form",[1318,1445,1446],{},"Column direction, row splits",[1303,1448,1449,1452],{},[1318,1450,1451],{},"Modal overlay",[1318,1453,1454,1455],{},"Fixed positioning, centered with ",[19,1456,1457],{},"place-items",[10,1459,1461],{"id":1460},"key-takeaways","Key Takeaways",[1463,1464,1465,1471,1478,1486,1492,1498],"ul",{},[1466,1467,1468,1470],"li",{},[19,1469,144],{}," spacers solve the \"push items right\" problem in navigation bars.",[1466,1472,1473,1474,1477],{},"Equal-height cards come free with Flexbox — no ",[19,1475,1476],{},"height"," hacks needed.",[1466,1479,1480,1482,1483,1485],{},[19,1481,1364],{}," plus ",[19,1484,1367],{}," builds responsive grids without media queries.",[1466,1487,1488,1489,1491],{},"Always add ",[19,1490,1025],{}," on flex children that contain long text to prevent overflow.",[1466,1493,1494,1495,1497],{},"Sticky footer is trivial with column direction and ",[19,1496,144],{}," on the content area.",[1466,1499,1500],{},"These patterns compose — combine sidebar + content with sticky footer for a full page layout.",[10,1502,1504],{"id":1503},"try-it-yourself","Try It Yourself",[15,1506,1507,1508,1513],{},"Build and customize any of these layouts interactively with the ",[1509,1510,1512],"a",{"href":1511},"\u002Ftools\u002Fflexbox-generator","Flexbox Generator",".",[1515,1516,1517],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":33,"searchDepth":51,"depth":51,"links":1519},[1520,1521,1522,1523,1524,1525,1526,1527,1528,1529,1530,1531,1532,1533,1534,1535],{"id":12,"depth":51,"text":13},{"id":25,"depth":51,"text":26},{"id":148,"depth":51,"text":149},{"id":240,"depth":51,"text":241},{"id":366,"depth":51,"text":367},{"id":461,"depth":51,"text":462},{"id":544,"depth":51,"text":545},{"id":677,"depth":51,"text":678},{"id":751,"depth":51,"text":752},{"id":851,"depth":51,"text":852},{"id":907,"depth":51,"text":908},{"id":1029,"depth":51,"text":1030},{"id":1151,"depth":51,"text":1152},{"id":1294,"depth":51,"text":1295},{"id":1460,"depth":51,"text":1461},{"id":1503,"depth":51,"text":1504},"2026-05-28","Navigation bars, card grids, holy grail layout, and other patterns you build daily with Flexbox.","md",{"immutable":106},"\u002Fguides\u002Fflexbox-common-patterns",{"title":5,"description":1537},"guides\u002Fflexbox-common-patterns","aTKmxOxg06XPuMLjnqzbxJYPFncAU82NrTTx4Tx1tTE",1780401333922]