[{"data":1,"prerenderedAt":930},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-flex":12,"i-ph:code":928},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":922,"meta":923,"navigation":122,"path":924,"seo":925,"stem":926,"__hash__":927},"docs\u002Fdocs\u002Fcomponents\u002Fflex.md","Flex",{"type":16,"value":17,"toc":917},"minimark",[18,22,26,45,317,322,325,752,756,787,791,794,913],[19,20,14],"h1",{"id":21},"flex",[23,24,25],"p",{},"A flexible box layout component that provides a convenient way to create flexbox layouts with various alignment and spacing options.",[23,27,28,29,33,34,33,37,40,41,44],{},"Most layout controls are boolean toggles. When you omit them, Flex falls back to CSS defaults: ",[30,31,32],"code",{},"row",", ",[30,35,36],{},"nowrap",[30,38,39],{},"flex-start",", and the theme ",[30,42,43],{},"s"," gap.",[46,47,49],"flex-example",{"source-path":48},"Flex\u002FFlex.vue",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Flex } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFlex gap=\"l\" column>\n    \u003CFlex\n      v-for=\"size in ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']\"\n      :key=\"size\"\n      :gap=\"size\"\n      expand\n      y-center\n    >\n      \u003Cdiv v-for=\"key in 3\" :key class=\"flex-1\">\n        {{ size.toUpperCase() }}\n      \u003C\u002Fdiv>\n    \u003C\u002FFlex>\n  \u003C\u002FFlex>\n\u003C\u002Ftemplate>\n","vue","",[30,57,58,78,107,117,124,134,161,170,186,201,215,221,227,233,271,278,288,298,308],{"__ignoreMap":55},[59,60,63,67,71,75],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sP76a","\u003C",[59,68,70],{"class":69},"sKpE2","script",[59,72,74],{"class":73},"sflEz"," setup",[59,76,77],{"class":65},">\n",[59,79,81,84,87,90,93,96,100,104],{"class":61,"line":80},2,[59,82,83],{"class":69},"import",[59,85,86],{"class":65}," {",[59,88,89],{"class":73}," Flex",[59,91,92],{"class":65}," }",[59,94,95],{"class":69}," from",[59,97,99],{"class":98},"sBR95"," '",[59,101,103],{"class":102},"sfmH-","@dolanske\u002Fvui",[59,105,106],{"class":98},"'\n",[59,108,110,113,115],{"class":61,"line":109},3,[59,111,112],{"class":65},"\u003C\u002F",[59,114,70],{"class":69},[59,116,77],{"class":65},[59,118,120],{"class":61,"line":119},4,[59,121,123],{"emptyLinePlaceholder":122},true,"\n",[59,125,127,129,132],{"class":61,"line":126},5,[59,128,66],{"class":65},[59,130,131],{"class":69},"template",[59,133,77],{"class":65},[59,135,137,140,142,145,148,151,154,156,159],{"class":61,"line":136},6,[59,138,139],{"class":65},"  \u003C",[59,141,14],{"class":69},[59,143,144],{"class":73}," gap",[59,146,147],{"class":65},"=",[59,149,150],{"class":98},"\"",[59,152,153],{"class":102},"l",[59,155,150],{"class":98},[59,157,158],{"class":73}," column",[59,160,77],{"class":65},[59,162,164,167],{"class":61,"line":163},7,[59,165,166],{"class":65},"    \u003C",[59,168,169],{"class":69},"Flex\n",[59,171,173,176,178,180,183],{"class":61,"line":172},8,[59,174,175],{"class":73},"      v-for",[59,177,147],{"class":65},[59,179,150],{"class":98},[59,181,182],{"class":102},"size in ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']",[59,184,185],{"class":98},"\"\n",[59,187,189,192,194,196,199],{"class":61,"line":188},9,[59,190,191],{"class":73},"      :key",[59,193,147],{"class":65},[59,195,150],{"class":98},[59,197,198],{"class":102},"size",[59,200,185],{"class":98},[59,202,204,207,209,211,213],{"class":61,"line":203},10,[59,205,206],{"class":73},"      :gap",[59,208,147],{"class":65},[59,210,150],{"class":98},[59,212,198],{"class":102},[59,214,185],{"class":98},[59,216,218],{"class":61,"line":217},11,[59,219,220],{"class":73},"      expand\n",[59,222,224],{"class":61,"line":223},12,[59,225,226],{"class":73},"      y-center\n",[59,228,230],{"class":61,"line":229},13,[59,231,232],{"class":65},"    >\n",[59,234,236,239,242,245,247,249,252,254,257,260,262,264,267,269],{"class":61,"line":235},14,[59,237,238],{"class":65},"      \u003C",[59,240,241],{"class":69},"div",[59,243,244],{"class":73}," v-for",[59,246,147],{"class":65},[59,248,150],{"class":98},[59,250,251],{"class":102},"key in 3",[59,253,150],{"class":98},[59,255,256],{"class":73}," :key",[59,258,259],{"class":73}," class",[59,261,147],{"class":65},[59,263,150],{"class":98},[59,265,266],{"class":102},"flex-1",[59,268,150],{"class":98},[59,270,77],{"class":65},[59,272,274],{"class":61,"line":273},15,[59,275,277],{"class":276},"sX1ls","        {{ size.toUpperCase() }}\n",[59,279,281,284,286],{"class":61,"line":280},16,[59,282,283],{"class":65},"      \u003C\u002F",[59,285,241],{"class":69},[59,287,77],{"class":65},[59,289,291,294,296],{"class":61,"line":290},17,[59,292,293],{"class":65},"    \u003C\u002F",[59,295,14],{"class":69},[59,297,77],{"class":65},[59,299,301,304,306],{"class":61,"line":300},18,[59,302,303],{"class":65},"  \u003C\u002F",[59,305,14],{"class":69},[59,307,77],{"class":65},[59,309,311,313,315],{"class":61,"line":310},19,[59,312,112],{"class":65},[59,314,131],{"class":69},[59,316,77],{"class":65},[318,319,321],"h3",{"id":320},"props","Props",[23,323,324],{},"The idea is that you control the component by using boolean props. This allows you to define layouts quickly.",[326,327,328,344],"table",{},[329,330,331],"thead",{},[332,333,334,338,341],"tr",{},[335,336,337],"th",{},"Name",[335,339,340],{},"Default",[335,342,343],{},"Type",[345,346,347,370,388,406,423,441,459,477,518,536,554,572,590,608,626,644,662,680,698,716,734],"tbody",{},[332,348,349,355,360],{},[350,351,352],"td",{},[30,353,354],{},"inline",[350,356,357],{},[30,358,359],{},"false",[350,361,362,365,366,369],{},[30,363,364],{},"boolean"," ",[367,368],"br",{}," Makes the flex container inline",[332,371,372,377,381],{},[350,373,374],{},[30,375,376],{},"wrap",[350,378,379],{},[30,380,359],{},[350,382,383,365,385,387],{},[30,384,364],{},[367,386],{}," Allows flex items to wrap to multiple lines",[332,389,390,395,399],{},[350,391,392],{},[30,393,394],{},"wrap-reverse",[350,396,397],{},[30,398,359],{},[350,400,401,365,403,405],{},[30,402,364],{},[367,404],{}," Reverses the wrap direction",[332,407,408,412,416],{},[350,409,410],{},[30,411,32],{},[350,413,414],{},[30,415,32],{},[350,417,418,365,420,422],{},[30,419,364],{},[367,421],{}," Sets flex direction to row",[332,424,425,430,434],{},[350,426,427],{},[30,428,429],{},"column",[350,431,432],{},[30,433,359],{},[350,435,436,365,438,440],{},[30,437,364],{},[367,439],{}," Sets flex direction to column",[332,442,443,448,452],{},[350,444,445],{},[30,446,447],{},"row-reverse",[350,449,450],{},[30,451,359],{},[350,453,454,365,456,458],{},[30,455,364],{},[367,457],{}," Sets flex direction to row-reverse",[332,460,461,466,470],{},[350,462,463],{},[30,464,465],{},"column-reverse",[350,467,468],{},[30,469,359],{},[350,471,472,365,474,476],{},[30,473,364],{},[367,475],{}," Sets flex direction to column-reverse",[332,478,479,484,488],{},[350,480,481],{},[30,482,483],{},"gap",[350,485,486],{},[30,487,43],{},[350,489,490,365,493,365,496,365,498,365,501,365,503,365,506,365,509,365,512,365,515,517],{},[30,491,492],{},"xxs",[30,494,495],{},"xs",[30,497,43],{},[30,499,500],{},"m",[30,502,153],{},[30,504,505],{},"xl",[30,507,508],{},"xxl",[30,510,511],{},"xxxl",[30,513,514],{},"number",[367,516],{}," Gap between flex items (theme spacing token or custom unit value)",[332,519,520,525,529],{},[350,521,522],{},[30,523,524],{},"center",[350,526,527],{},[30,528,359],{},[350,530,531,365,533,535],{},[30,532,364],{},[367,534],{}," Centers items on both axes",[332,537,538,543,547],{},[350,539,540],{},[30,541,542],{},"x-start",[350,544,545],{},[30,546,39],{},[350,548,549,365,551,553],{},[30,550,364],{},[367,552],{}," Aligns items to the start of the main axis",[332,555,556,561,565],{},[350,557,558],{},[30,559,560],{},"x-end",[350,562,563],{},[30,564,359],{},[350,566,567,365,569,571],{},[30,568,364],{},[367,570],{}," Aligns items to the end of the main axis",[332,573,574,579,583],{},[350,575,576],{},[30,577,578],{},"x-center",[350,580,581],{},[30,582,359],{},[350,584,585,365,587,589],{},[30,586,364],{},[367,588],{}," Centers items along the main axis",[332,591,592,597,601],{},[350,593,594],{},[30,595,596],{},"x-between",[350,598,599],{},[30,600,359],{},[350,602,603,365,605,607],{},[30,604,364],{},[367,606],{}," Distributes items with space between them",[332,609,610,615,619],{},[350,611,612],{},[30,613,614],{},"x-around",[350,616,617],{},[30,618,359],{},[350,620,621,365,623,625],{},[30,622,364],{},[367,624],{}," Distributes items with space around them",[332,627,628,633,637],{},[350,629,630],{},[30,631,632],{},"x-evenly",[350,634,635],{},[30,636,359],{},[350,638,639,365,641,643],{},[30,640,364],{},[367,642],{}," Distributes items with equal space around them",[332,645,646,651,655],{},[350,647,648],{},[30,649,650],{},"y-start",[350,652,653],{},[30,654,39],{},[350,656,657,365,659,661],{},[30,658,364],{},[367,660],{}," Aligns items to the start of the cross axis",[332,663,664,669,673],{},[350,665,666],{},[30,667,668],{},"y-end",[350,670,671],{},[30,672,359],{},[350,674,675,365,677,679],{},[30,676,364],{},[367,678],{}," Aligns items to the end of the cross axis",[332,681,682,687,691],{},[350,683,684],{},[30,685,686],{},"y-center",[350,688,689],{},[30,690,359],{},[350,692,693,365,695,697],{},[30,694,364],{},[367,696],{}," Centers items along the cross axis",[332,699,700,705,709],{},[350,701,702],{},[30,703,704],{},"y-baseline",[350,706,707],{},[30,708,359],{},[350,710,711,365,713,715],{},[30,712,364],{},[367,714],{}," Aligns items along their baselines",[332,717,718,723,727],{},[350,719,720],{},[30,721,722],{},"y-stretch",[350,724,725],{},[30,726,359],{},[350,728,729,365,731,733],{},[30,730,364],{},[367,732],{}," Stretches items across the cross axis",[332,735,736,741,745],{},[350,737,738],{},[30,739,740],{},"expand",[350,742,743],{},[30,744,359],{},[350,746,747,365,749,751],{},[30,748,364],{},[367,750],{}," Makes the flex container expand to full width",[318,753,755],{"id":754},"slots","Slots",[326,757,758,770],{},[329,759,760],{},[332,761,762,764,767],{},[335,763,337],{},[335,765,766],{},"Accepts",[335,768,769],{},"Description",[345,771,772],{},[332,773,774,779,784],{},[350,775,776],{},[30,777,778],{},"default",[350,780,781],{},[30,782,783],{},"any",[350,785,786],{},"The flex items to be laid out",[318,788,790],{"id":789},"tokens","Tokens",[23,792,793],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[326,795,796,807],{},[329,797,798],{},[332,799,800,803,805],{},[335,801,802],{},"Token",[335,804,340],{},[335,806,769],{},[345,808,809,823,837,851,865,879,898],{},[332,810,811,816,820],{},[350,812,813],{},[30,814,815],{},"--vui-flex-display",[350,817,818],{},[30,819,21],{},[350,821,822],{},"Display value",[332,824,825,830,834],{},[350,826,827],{},[30,828,829],{},"--vui-flex-wrap",[350,831,832],{},[30,833,36],{},[350,835,836],{},"Flex wrap",[332,838,839,844,848],{},[350,840,841],{},[30,842,843],{},"--vui-flex-direction",[350,845,846],{},[30,847,32],{},[350,849,850],{},"Flex direction",[332,852,853,858,862],{},[350,854,855],{},[30,856,857],{},"--vui-flex-justify",[350,859,860],{},[30,861,39],{},[350,863,864],{},"Justify content",[332,866,867,872,876],{},[350,868,869],{},[30,870,871],{},"--vui-flex-align",[350,873,874],{},[30,875,39],{},[350,877,878],{},"Align items",[332,880,881,886,895],{},[350,882,883],{},[30,884,885],{},"--vui-flex-gap",[350,887,888],{},[889,890,892],"a",{"href":891},"\u002Fdocs\u002Ftokens\u002Fspacing",[30,893,894],{},"var(--space-s)",[350,896,897],{},"Gap",[332,899,900,905,910],{},[350,901,902],{},[30,903,904],{},"--vui-flex-width",[350,906,907],{},[30,908,909],{},"auto",[350,911,912],{},"Container width",[914,915,916],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":55,"searchDepth":80,"depth":80,"links":918},[919,920,921],{"id":320,"depth":109,"text":321},{"id":754,"depth":109,"text":755},{"id":789,"depth":109,"text":790},"md",{},"\u002Fdocs\u002Fcomponents\u002Fflex",{"title":14,"description":25},"docs\u002Fcomponents\u002Fflex","oLUFJrcGr_glfMFq02nyICNyV5HAlLF0hWoGtR590fk",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":929},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882849]