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