[{"data":1,"prerenderedAt":193},["ShallowReactive",2],{"term-f\u002Fflexbox":3,"related-f\u002Fflexbox":175},{"id":4,"title":5,"acronym":6,"body":7,"category":155,"description":156,"difficulty":157,"extension":158,"letter":159,"meta":160,"navigation":161,"path":162,"related":163,"seo":169,"sitemap":170,"stem":173,"subcategory":6,"__hash__":174},"terms\u002Fterms\u002Ff\u002Fflexbox.md","Flexbox",null,{"type":8,"value":9,"toc":149},"minimark",[10,15,19,23,26,30,138,142,145],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Flexbox is a CSS layout system that makes positioning elements in a row or column stupidly easy. Centering something used to require dark magic — now it's three lines of CSS. Flex handles alignment, spacing, and order without you needing to calculate anything.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"CSS Flexbox is a one-dimensional layout model that distributes space along a single axis (row or column). It provides properties for alignment (justify-content, align-items), ordering, wrapping, and flexible sizing of items within a container. Best for UI components and small-scale layouts.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* Center something both horizontally and vertically *\u002F\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n","css","",[38,39,40,49,63,80,93,105,119,132],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F* Center something both horizontally and vertically *\u002F\n",[41,50,52,56,60],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o",".",[41,57,59],{"class":58},"sBMFI","container",[41,61,62],{"class":54}," {\n",[41,64,66,70,73,77],{"class":43,"line":65},3,[41,67,69],{"class":68},"sqsOY","  display",[41,71,72],{"class":54},":",[41,74,76],{"class":75},"sTEyZ"," flex",[41,78,79],{"class":54},";\n",[41,81,83,86,88,91],{"class":43,"line":82},4,[41,84,85],{"class":68},"  justify-content",[41,87,72],{"class":54},[41,89,90],{"class":75}," center",[41,92,79],{"class":54},[41,94,96,99,101,103],{"class":43,"line":95},5,[41,97,98],{"class":68},"  align-items",[41,100,72],{"class":54},[41,102,90],{"class":75},[41,104,79],{"class":54},[41,106,108,111,113,117],{"class":43,"line":107},6,[41,109,110],{"class":68},"  gap",[41,112,72],{"class":54},[41,114,116],{"class":115},"sbssI"," 1rem",[41,118,79],{"class":54},[41,120,122,125,127,130],{"class":43,"line":121},7,[41,123,124],{"class":68},"  flex-wrap",[41,126,72],{"class":54},[41,128,129],{"class":75}," wrap",[41,131,79],{"class":54},[41,133,135],{"class":43,"line":134},8,[41,136,137],{"class":54},"}\n",[11,139,141],{"id":140},"when-youll-hear-this","When You'll Hear This",[16,143,144],{},"\"Use flexbox for the navbar — it handles spacing between items perfectly.\" \u002F \"Flexbox is one-dimensional; use CSS Grid for two-dimensional layouts.\"",[146,147,148],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}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);}",{"title":36,"searchDepth":51,"depth":51,"links":150},[151,152,153,154],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":140,"depth":51,"text":141},"frontend","Flexbox is a CSS layout system that makes positioning elements in a row or column stupidly easy.","beginner","md","f",{},true,"\u002Fterms\u002Ff\u002Fflexbox",[164,165,166,167,168],"CSS Grid","CSS","Responsive Design","Box Model","Tailwind",{"title":5,"description":156},{"changefreq":171,"priority":172},"weekly",0.7,"terms\u002Ff\u002Fflexbox","3WspZRpQU3AvH6RtXYKGLJkOEE80wFNCHusZig-cvkE",[176,179,183,187,190],{"title":167,"path":177,"acronym":6,"category":155,"difficulty":157,"description":178},"\u002Fterms\u002Fb\u002Fbox-model","The box model is how CSS thinks about every element on a page — as a box with four layers: content, padding, border, and margin.",{"title":165,"path":180,"acronym":181,"category":155,"difficulty":157,"description":182},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":164,"path":184,"acronym":6,"category":155,"difficulty":185,"description":186},"\u002Fterms\u002Fc\u002Fcss-grid","intermediate","CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into.",{"title":166,"path":188,"acronym":6,"category":155,"difficulty":157,"description":189},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",{"title":168,"path":191,"acronym":6,"category":155,"difficulty":157,"description":192},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",1776518280563]