[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts":671,"blog-author-\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts":1771,"i-material-symbols:arrow-back-rounded":1783},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1757,"date":1758,"description":1759,"draft":1760,"editorsPick":1760,"extension":1761,"featured":1760,"image":1762,"imageAlt":1763,"meta":1764,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1765,"seo":1766,"stem":1767,"tags":1768,"__hash__":1770},"blog\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts.md","CSS Flexbox Cheat Sheet for Building Layouts","Queendarlin Nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ffundamentals-of-the-css-float-and-clear-properties\u002Fauthor.jpeg",null,"queendarlin-nnamani",{"type":679,"value":680,"toc":1728},"minimark",[681,690,695,712,715,719,722,750,754,757,762,787,791,813,816,823,827,836,840,851,855,866,874,884,891,897,900,904,913,916,922,930,936,942,945,951,962,968,974,980,990,996,1002,1004,1010,1020,1026,1032,1034,1040,1044,1047,1053,1063,1069,1075,1077,1083,1093,1099,1105,1107,1113,1123,1129,1135,1137,1143,1147,1150,1153,1163,1169,1175,1177,1183,1193,1199,1205,1207,1213,1223,1229,1235,1237,1243,1253,1259,1265,1267,1273,1283,1289,1295,1297,1303,1307,1312,1322,1328,1334,1336,1342,1351,1357,1363,1365,1371,1380,1386,1392,1394,1400,1409,1415,1421,1427,1431,1434,1443,1449,1455,1460,1469,1475,1481,1487,1496,1502,1508,1514,1523,1529,1535,1541,1550,1556,1562,1568,1572,1575,1579,1585,1588,1594,1600,1602,1608,1612,1615,1621,1627,1629,1635,1639,1642,1648,1654,1656,1662,1666,1669,1675,1681,1683,1689,1693,1696,1702,1708,1710,1715,1719],[682,683,684,685,689],"p",{},"Due to the technicality of web designs, it can be challenging to use other CSS properties for creating layouts. To overcome this, the CSS Flexbox came into the picture. CSS Flexbox makes it possible for us to build flexible layouts without the use of CSS ",[686,687,688],"code",{},"float"," and positioning. In this article, we’ll provide a CSS Flexbox cheat sheet and explain hos it is useful. In addition, we’ll learn the Flexbox architecture as well as the different properties of its components.",[691,692,694],"h2",{"id":693},"what-is-flexbox","What is Flexbox?",[682,696,697,698,705,706,711],{},"A ",[699,700,704],"a",{"href":701,"rel":702},"https:\u002F\u002Fwww.developphp.com\u002Flib\u002FCSS\u002FFlexible-Box-Layout-Module",[703],"nofollow","Flexible Box Module",", also known as a Flexbox, is a mechanism for building layouts in one dimension. Unlike the ",[699,707,710],{"href":708,"rel":709},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties",[703],"CSS Grid Layout",", which creates a two-dimensional layout by creating rows and columns simultaneously, the Flexbox creates a layout as either a flex row or flex column. Flexbox enables the arrangement of spaces and alignment between elements in a webpage.",[682,713,714],{},"Four layout models (block, inline, table, positioned) existed before the Flexbox. However, they lack the flexibility that Flexbox offers, such as resizing, changing orientation, and shrinking and stretching elements of web pages.",[691,716,718],{"id":717},"why-use-flexbox","Why Use Flexbox?",[682,720,721],{},"The Flexbox offers many conveniences for building web pages, and can be used for the following:",[723,724,725,729,732,735,738,741,744,747],"ul",{},[726,727,728],"li",{},"To arrange elements in web pages neatly by aligning them",[726,730,731],{},"To create responsive layouts",[726,733,734],{},"To space the items on web pages",[726,736,737],{},"To wrap many lines (even though it is a single line by default)",[726,739,740],{},"To get maximum flexibility in building layouts",[726,742,743],{},"To set order and sequence while arranging elements of web pages",[726,745,746],{},"To reorder items",[726,748,749],{},"Mobile-friendly development",[691,751,753],{"id":752},"flexbox-architecture","Flexbox Architecture",[682,755,756],{},"The Flexbox architecture comprises two axes:",[758,759,761],"h3",{"id":760},"main-axis","Main Axis",[682,763,764,765,768,769,774,775,778,779,782,783,786],{},"The flex items (content) move as a group on this axis. The ",[686,766,767],{},"flex-direction"," ",[699,770,773],{"href":771,"rel":772},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fapplying-css-positioning-properties",[703],"property determines the layout position",". Therefore, if you have a row, the main axis will be along the row, and if you have a column, it will be along the column. The main axis moves from left to right by default. The starting point is called the ",[686,776,777],{},"main start"," and the endpoint is called the ",[686,780,781],{},"main end",". The distance between the main start and the main end is called ",[686,784,785],{},"main size",".",[758,788,790],{"id":789},"cross-axis","Cross Axis",[682,792,793,794,796,797,778,800,803,804,807,808,810,811,786],{},"The cross axis moves perpendicular to the main axis. Thus, if the ",[686,795,767],{}," is a row, it moves along the column, and vice-versa. On the cross axis, you can align items against each other and the flex container by moving them individually or as a group. You can also control the flex spacing in wrapped flex lines by treating them as a group. The cross axis moves from top to bottom by default. The starting point is called the ",[686,798,799],{},"cross start",[686,801,802],{},"cross end",". ",[686,805,806],{},"Cross size"," is the distance between the ",[686,809,799],{}," and the ",[686,812,802],{},[682,814,815],{},"Let’s look at a flexbox example regarding the architecture:",[682,817,818],{},[819,820],"img",{"alt":821,"src":822},"Visual diagram showing off flexbox architecture and the two main axes","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-001.png",[691,824,826],{"id":825},"components-of-flexbox","Components of Flexbox",[682,828,829,830,835],{},"Flexbox is comprised of ",[699,831,834],{"href":832,"rel":833},"https:\u002F\u002Fwww.javatpoint.com\u002Fcss-flexbox",[703],"two components",":",[758,837,839],{"id":838},"css-flex-container","CSS Flex Container",[682,841,842,843,846,847,850],{},"The CSS flex container is also known as the ",[686,844,845],{},"parent element",". Therefore, for us to create a Flexbox, we need the parent element with ",[686,848,849],{},"display: flex"," set on it. The flex layout allows the container to change the width or height of the item to establish order and fill the best available space, primarily to accommodate all display devices and screen sizes. Simply put, the flex container expands items to fill any open space, or shrinks the space to prevent overflow.",[758,852,854],{"id":853},"css-flex-items","CSS Flex Items",[682,856,857,858,861,862,865],{},"The direct children of the parent element (flex container) are ",[686,859,860],{},"flex items",", also called ",[686,863,864],{},"child elements",". The flex items appear in a row and start from the main axis' starting edge.",[682,867,868,869,835],{},"Let’s look at an example of ",[699,870,873],{"href":871,"rel":872},"https:\u002F\u002Fpieces.app\u002Fblog\u002Flearn-to-implement-css-container-queries",[703],"how the CSS flex container and items work",[875,876,881],"pre",{"className":877,"code":879,"language":880},[878],"language-text","Flex Container\nFour Flex Items contained in a Flex Container\n  Box 1  Box 2  Box 3  Box 4\n","text",[686,882,879],{"__ignoreMap":883},"",[682,885,886],{},[699,887,890],{"href":888,"rel":889},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=b4dd4a8177",[703],"Save this code",[682,892,893],{},[819,894],{"alt":895,"src":896},"Four flex items being contained in a flex container","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-002.png",[682,898,899],{},"The flex items are the flexible boxes (in brown, blue, yellow, and red) inside the purple flex container.",[691,901,903],{"id":902},"flex-container-properties","Flex Container Properties",[682,905,906,907,912],{},"The ",[699,908,911],{"href":909,"rel":910},"https:\u002F\u002Fwww.simplilearn.com\u002Ftutorials\u002Fcss-tutorial\u002Fcss-flexbox",[703],"CSS flex container"," has several properties that help explain its role in building layouts on our web pages. We’ll discuss these flexbox properties below.",[758,914,915],{"id":767},"Flex Direction",[682,917,918,919,921],{},"This CSS flex property establishes how we place flex items in flex containers by determining the direction of the main axis. The flex direction is set to a row by default. However, if we change it to a flex column, the main axis changes and displays the item in a column. The following values are possible with the ",[686,920,767],{}," property:",[723,923,924],{},[726,925,926,929],{},[686,927,928],{},"row value",": This value arranges the flex items horizontally, from left to right. Here is an example of how row value works:",[875,931,934],{"className":932,"code":933,"language":880},[878],"Flex Direction\nFlex-direction row value\n  Box 1  Box 2  Box 3  Box 4\n",[686,935,933],{"__ignoreMap":883},[682,937,938],{},[699,939,890],{"href":940,"rel":941},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=430d4ebd48",[703],[682,943,944],{},"The outcome:",[682,946,947],{},[819,948],{"alt":949,"src":950},"Four flex items being contained in a flex container with tighter spacing","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-003.png",[723,952,953],{},[726,954,955,958,961],{},[686,956,957],{},"row-reverse value",[959,960,835],"strong",{}," This value arranges the flex items horizontally, but from right to left. Let’s see how this works with this example:",[875,963,966],{"className":964,"code":965,"language":880},[878],"Flex Direction\nFlex-direction row-reverse value\n  Box 1  Box 2  Box 3  Box 4\n",[686,967,965],{"__ignoreMap":883},[682,969,970,944],{},[699,971,890],{"href":972,"rel":973},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=1f7c4f8fcd",[703],[682,975,976],{},[819,977],{"alt":978,"src":979},"Four flex items being contained in a flex container right aligned","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-004.png",[723,981,982],{},[726,983,984,987,989],{},[686,985,986],{},"column value",[959,988,835],{}," This value arranges the flex items vertically, from top to bottom. Here is an example of column value:",[875,991,994],{"className":992,"code":993,"language":880},[878],"Flex Direction\nFlex-direction column value\n  Box 1  Box 2  Box 3  Box 4\n",[686,995,993],{"__ignoreMap":883},[682,997,998],{},[699,999,890],{"href":1000,"rel":1001},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=2f234cb6de",[703],[682,1003,944],{},[682,1005,1006],{},[819,1007],{"alt":1008,"src":1009},"Four flex items being contained in a flex container stacked vertically","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-005.png",[723,1011,1012],{},[726,1013,1014,1017,1019],{},[686,1015,1016],{},"column-reverse value",[959,1018,835],{}," This value arranges the flex items vertically, but from bottom to top. Here is an example, below:",[875,1021,1024],{"className":1022,"code":1023,"language":880},[878],"Flex Direction\nFlex-direction column-reverse value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1025,1023],{"__ignoreMap":883},[682,1027,1028],{},[699,1029,890],{"href":1030,"rel":1031},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=d4f04bbdd8",[703],[682,1033,944],{},[682,1035,1036],{},[819,1037],{"alt":1038,"src":1039},"Four flex items being contained in a flex container stacked vertically in reverse order","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-006.png",[758,1041,1043],{"id":1042},"flex-wrap","Flex-wrap",[682,1045,1046],{},"This Flex property defines whether or not a flex item should wrap in the case of insufficient space on one flex line.",[682,1048,1049,1050,1052],{},"To understand ",[686,1051,1042],{},", let’s look at the different values for this flex property:",[723,1054,1055],{},[726,1056,1057,1060,1062],{},[686,1058,1059],{},"nowrap value",[959,1061,835],{}," This is the default setting of flex-wrap. It defines that the flex items will not wrap, as shown below:",[875,1064,1067],{"className":1065,"code":1066,"language":880},[878],"Flex Wrap\nFlex-wrap nowrap value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1068,1066],{"__ignoreMap":883},[682,1070,1071],{},[699,1072,890],{"href":1073,"rel":1074},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=809c45a131",[703],[682,1076,944],{},[682,1078,1079],{},[819,1080],{"alt":1081,"src":1082},"Four flex items being contained in a flex container with the nowrap value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-007.png",[723,1084,1085],{},[726,1086,1087,1090,1092],{},[686,1088,1089],{},"wrap value",[959,1091,835],{}," This defines that the flex items will wrap if needed:",[875,1094,1097],{"className":1095,"code":1096,"language":880},[878],"Flex Wrap\nFlex-wrap wrap value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1098,1096],{"__ignoreMap":883},[682,1100,1101],{},[699,1102,890],{"href":1103,"rel":1104},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=599741a475",[703],[682,1106,944],{},[682,1108,1109],{},[819,1110],{"alt":1111,"src":1112},"Four flex items being contained in a flex container with the wrap value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-008.png",[723,1114,1115],{},[726,1116,1117,1120,1122],{},[686,1118,1119],{},"wrap-reverse value",[959,1121,835],{}," This defines that the flex items will wrap in the reverse order if necessary, as shown below:",[875,1124,1127],{"className":1125,"code":1126,"language":880},[878],"Flex Wrap\nFlex-wrap wrap-reverse value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1128,1126],{"__ignoreMap":883},[682,1130,1131],{},[699,1132,890],{"href":1133,"rel":1134},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=6cb04491b4",[703],[682,1136,944],{},[682,1138,1139],{},[819,1140],{"alt":1141,"src":1142},"Four flex items being contained in a flex container with the wrap-reverse value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-009.png",[758,1144,1146],{"id":1145},"justify-content","Justify Content",[682,1148,1149],{},"This CSS flex property helps to align the flex items based on the main axis within a Flex container. This occurs when the flex items do not use all open space on the main axis, thereby aligning horizontally. In addition, the property allows you to adjust to the left, center, right or add space between items.",[682,1151,1152],{},"Several values can explain the CSS justify-content property, including the following:",[723,1154,1155],{},[726,1156,1157,1160,1162],{},[686,1158,1159],{},"flex-start value",[959,1161,835],{}," This is the default value of the CSS justify-content property, and it shows the alignment of the flex items at the beginning of the container, as shown below:",[875,1164,1167],{"className":1165,"code":1166,"language":880},[878],"Justify Content\nJustify-content flex-start value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1168,1166],{"__ignoreMap":883},[682,1170,1171],{},[699,1172,890],{"href":1173,"rel":1174},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=99f8479d6e",[703],[682,1176,944],{},[682,1178,1179],{},[819,1180],{"alt":1181,"src":1182},"Four flex items being contained in a flex container with justify content applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-010.png",[723,1184,1185],{},[726,1186,1187,1190,1192],{},[686,1188,1189],{},"flex-end value",[959,1191,835],{}," This value shows the alignment of the flex items at the end of the container, like this:",[875,1194,1197],{"className":1195,"code":1196,"language":880},[878],"Justify Content\nJustify-content flex-end value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1198,1196],{"__ignoreMap":883},[682,1200,1201],{},[699,1202,890],{"href":1203,"rel":1204},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=08f04a8abd",[703],[682,1206,944],{},[682,1208,1209],{},[819,1210],{"alt":1211,"src":1212},"Four flex items being contained in a flex container with justify content flex-end value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-011.png",[723,1214,1215],{},[726,1216,1217,1220,1222],{},[686,1218,1219],{},"center value",[959,1221,835],{}," This value aligns the flex items at the center of the container:",[875,1224,1227],{"className":1225,"code":1226,"language":880},[878],"Justify Content\nJustify-content center value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1228,1226],{"__ignoreMap":883},[682,1230,1231],{},[699,1232,890],{"href":1233,"rel":1234},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=e40f43b62d",[703],[682,1236,944],{},[682,1238,1239],{},[819,1240],{"alt":1241,"src":1242},"Four flex items being contained in a flex container with justify content center value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-012.png",[723,1244,1245],{},[726,1246,1247,1250,1252],{},[686,1248,1249],{},"space-around value",[959,1251,835],{}," This value shows the flex items with space before, between, and after the lines, as seen in this example:",[875,1254,1257],{"className":1255,"code":1256,"language":880},[878],"Justify Content\nJustify-content space-around value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1258,1256],{"__ignoreMap":883},[682,1260,1261],{},[699,1262,890],{"href":1263,"rel":1264},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=de7a40ad6c",[703],[682,1266,944],{},[682,1268,1269],{},[819,1270],{"alt":1271,"src":1272},"Four flex items being contained in a flex container with justify content space-around value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-013.png",[723,1274,1275],{},[726,1276,1277,1280,1282],{},[686,1278,1279],{},"space-between value",[959,1281,835],{}," This value shows the flex items with space between the lines:",[875,1284,1287],{"className":1285,"code":1286,"language":880},[878],"Justify Content\nJustify-content space-between value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1288,1286],{"__ignoreMap":883},[682,1290,1291],{},[699,1292,890],{"href":1293,"rel":1294},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=02214f9f78",[703],[682,1296,944],{},[682,1298,1299],{},[819,1300],{"alt":1301,"src":1302},"Four flex items being contained in a flex container with justify content space-between values applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-014.png",[758,1304,1306],{"id":1305},"align-items","Align Items",[682,1308,906,1309,1311],{},[686,1310,1305],{}," property aligns the flex items vertically due to the item's inability to use all available space on the cross-axis. Let’s check out examples of different values of the CSS align-item property in order to understand it better:",[723,1313,1314],{},[726,1315,1316,1319,1321],{},[686,1317,1318],{},"stretch value",[959,1320,835],{}," This shows the default value of the CSS align-items property, and it fills the flex container by stretching the flex items, as we can see below:",[875,1323,1326],{"className":1324,"code":1325,"language":880},[878],"Align items\nAlign-items stretch value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1327,1325],{"__ignoreMap":883},[682,1329,1330],{},[699,1331,890],{"href":1332,"rel":1333},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=bd764998ec",[703],[682,1335,944],{},[682,1337,1338],{},[819,1339],{"alt":1340,"src":1341},"Four flex items being contained in a flex container with align-items property applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-015.png",[723,1343,1344],{},[726,1345,1346,1348,1350],{},[686,1347,1219],{},[959,1349,835],{}," This value helps to align the flex items in the middle of the container, like this:",[875,1352,1355],{"className":1353,"code":1354,"language":880},[878],"Align items\nAlign-items center value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1356,1354],{"__ignoreMap":883},[682,1358,1359],{},[699,1360,890],{"href":1361,"rel":1362},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=07ef448ba9",[703],[682,1364,944],{},[682,1366,1367],{},[819,1368],{"alt":1369,"src":1370},"Four flex items being contained in a flex container with align-items center value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-016.png",[723,1372,1373],{},[726,1374,1375,1377,1379],{},[686,1376,1159],{},[959,1378,835],{}," This value helps to align the flex items at the top of the container:",[875,1381,1384],{"className":1382,"code":1383,"language":880},[878],"Align items\nAlign-items Flex-start value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1385,1383],{"__ignoreMap":883},[682,1387,1388],{},[699,1389,890],{"href":1390,"rel":1391},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=4552489294",[703],[682,1393,944],{},[682,1395,1396],{},[819,1397],{"alt":1398,"src":1399},"Four flex items being contained in a flex container with align-items flex-start value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-017.png",[723,1401,1402],{},[726,1403,1404,1406,1408],{},[686,1405,1189],{},[959,1407,835],{}," This value helps to align the flex items at the bottom of the container, as shown here:",[875,1410,1413],{"className":1411,"code":1412,"language":880},[878],"Align items\nAlign-items Flex-end value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1414,1412],{"__ignoreMap":883},[682,1416,1417,944],{},[699,1418,890],{"href":1419,"rel":1420},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=0c6e44a0d7",[703],[682,1422,1423],{},[819,1424],{"alt":1425,"src":1426},"Four flex items being contained in a flex container with align-items flex-end value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-018.png",[758,1428,1430],{"id":1429},"align-content","Align Content",[682,1432,1433],{},"The CSS align-content property helps to align the flex lines by applying flex-wrap; it wraps if there are many flex lines. This is similar to align-items, but it aligns lines instead of aligning flex items. The CSS align-content property can have the following values:",[723,1435,1436],{},[726,1437,1438,1440,1442],{},[686,1439,1318],{},[959,1441,835],{}," This value shows the CSS align-content property's default value and involves stretching the flex lines to take up the available space, as in the example below:",[875,1444,1447],{"className":1445,"code":1446,"language":880},[878],"Align content\nAlign-content stretch value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1448,1446],{"__ignoreMap":883},[682,1450,1451,944],{},[699,1452,890],{"href":1453,"rel":1454},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=c2384ab691",[703],[682,1456,1457],{},[819,1458],{"alt":1459,"src":1341},"Four flex items being contained in a flex container with align-items stretch value applied",[723,1461,1462],{},[726,1463,1464,1466,1468],{},[686,1465,1279],{},[959,1467,835],{}," This value shows equal space between flex lines:",[875,1470,1473],{"className":1471,"code":1472,"language":880},[878],"Align content\nAlign-content space-between value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1474,1472],{"__ignoreMap":883},[682,1476,1477,944],{},[699,1478,890],{"href":1479,"rel":1480},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=33684ea2f8",[703],[682,1482,1483],{},[819,1484],{"alt":1485,"src":1486},"Four flex items being contained in a flex container with align-content space-between values applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-020.png",[723,1488,1489],{},[726,1490,1491,1493,1495],{},[686,1492,1249],{},[959,1494,835],{}," This value shows space before, between, and after the flex lines. We can see this in the example below:",[875,1497,1500],{"className":1498,"code":1499,"language":880},[878],"Align content\nAlign-content space-around value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1501,1499],{"__ignoreMap":883},[682,1503,1504,944],{},[699,1505,890],{"href":1506,"rel":1507},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=c4804196b0",[703],[682,1509,1510],{},[819,1511],{"alt":1512,"src":1513},"Four flex items being contained in a flex container with align-content space-around values applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-021.png",[723,1515,1516],{},[726,1517,1518,1520,1522],{},[686,1519,1219],{},[959,1521,835],{}," This value shows the flex lines in the middle of the container:",[875,1524,1527],{"className":1525,"code":1526,"language":880},[878],"Align content\nAlign-content center value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1528,1526],{"__ignoreMap":883},[682,1530,1531,944],{},[699,1532,890],{"href":1533,"rel":1534},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=2da3458e1f",[703],[682,1536,1537],{},[819,1538],{"alt":1539,"src":1540},"Four flex items being contained in a flex container with align-content center value applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-022.png",[723,1542,1543],{},[726,1544,1545,1547,1549],{},[686,1546,1159],{},[959,1548,835],{}," This value showsthe flex lines at the beginning of the container, as shown below:",[875,1551,1554],{"className":1552,"code":1553,"language":880},[878],"Align content\nAlign-content flex-end value\n  Box 1  Box 2  Box 3  Box 4\n",[686,1555,1553],{"__ignoreMap":883},[682,1557,1558,944],{},[699,1559,890],{"href":1560,"rel":1561},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=333a46a717",[703],[682,1563,1564],{},[819,1565],{"alt":1566,"src":1567},"Four flex items being contained in a flex container with align-content flex-end values applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-023.png",[691,1569,1571],{"id":1570},"flex-item-properties","Flex Item Properties",[682,1573,1574],{},"The CSS flex item has many properties that help explain how flex items are arranged to build layouts. We’ll break down these properties below.",[758,1576,1578],{"id":1577},"order-property","Order Property",[682,1580,906,1581,1584],{},[686,1582,1583],{},"order-flex"," property defines the order of the flex items in the same container. The order value must be a number, and there is a preset value of 0. By default, all flex items are arranged in the order of document flow, and when we apply the order property, we do not need to change the HTML structure.",[682,1586,1587],{},"For example, the order property allows us to change the order of the flex items:",[875,1589,1592],{"className":1590,"code":1591,"language":880},[878],"Flex Item Property\nOrder property\n  Box 1  Box 2  Box 3  Box 4\n",[686,1593,1591],{"__ignoreMap":883},[682,1595,1596],{},[699,1597,890],{"href":1598,"rel":1599},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=cdbd4c9c59",[703],[682,1601,944],{},[682,1603,1604],{},[819,1605],{"alt":1606,"src":1607},"Four flex items being contained in a flex container with align-content flex basis property applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-024.png",[758,1609,1611],{"id":1610},"align-self-property","Align-self Property",[682,1613,1614],{},"The align-self property defines the alignment for the selected item inside the flexible container. This property overrides the default alignment set by the container's align-items property, as we can see in this example:",[875,1616,1619],{"className":1617,"code":1618,"language":880},[878],"Flex Item Property\nAlign-self property\n  Box 1  Box 2  Box 3  Box 4\n",[686,1620,1618],{"__ignoreMap":883},[682,1622,1623],{},[699,1624,890],{"href":1625,"rel":1626},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=e93242869f",[703],[682,1628,944],{},[682,1630,1631],{},[819,1632],{"alt":1633,"src":1634},"Four flex items being contained in a flex container with align-self property applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-025.png",[758,1636,1638],{"id":1637},"flex-grow-property","Flex-grow Property",[682,1640,1641],{},"The flex-grow property defines the rate a flex item will grow compared to the rest of the flex items in the same container. The value must also be a number with a default value of 0. Flex-grow value of 0 means the flex item's width as per content only. A value of 1 means the flex item's width distribution will be equal:",[875,1643,1646],{"className":1644,"code":1645,"language":880},[878],"Flex Item Property\nFlex grow property\n  Box 1  Box 2  Box 3  Box 4\n",[686,1647,1645],{"__ignoreMap":883},[682,1649,1650],{},[699,1651,890],{"href":1652,"rel":1653},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=11f14d9932",[703],[682,1655,944],{},[682,1657,1658],{},[819,1659],{"alt":1660,"src":1661},"Four flex items being contained in a flex container with flex-grow property applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-026.png",[758,1663,1665],{"id":1664},"flex-shrink","Flex-shrink",[682,1667,1668],{},"The flex-shrink property defines the rate a flex item will shrink compared to the other flex items in the same flex container. The value must be a number with a default value of 1. We can see how this looks below:",[875,1670,1673],{"className":1671,"code":1672,"language":880},[878],"Flex Item Property\nFlex shrink property\n  Box 1  Box 2  Box 3  Box 4\n",[686,1674,1672],{"__ignoreMap":883},[682,1676,1677],{},[699,1678,890],{"href":1679,"rel":1680},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=56f54ea6bc",[703],[682,1682,944],{},[682,1684,1685],{},[819,1686],{"alt":1687,"src":1688},"Four flex items being contained in a flex container with flex-shrink property applied","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fimg-027.png",[758,1690,1692],{"id":1691},"flex-basis","Flex-basis",[682,1694,1695],{},"The flex-basis property defines the initial length or width of a flex item. The default value of the flex-basis property is auto. In addition, for the percentage we need, we’ll assign flex-shrink. For example, 30% means the width of the item will be 30%, and the sum of the widths of other items will be 70%, as shown below:",[875,1697,1700],{"className":1698,"code":1699,"language":880},[878],"Flex Item Property\nFlex basis property\n  Box 1  Box 2  Box 3  Box 4\n",[686,1701,1699],{"__ignoreMap":883},[682,1703,1704],{},[699,1705,890],{"href":1706,"rel":1707},"https:\u002F\u002Fqueendarlinnna.pieces.cloud\u002F?p=ead74593ee",[703],[682,1709,944],{},[682,1711,1712],{},[819,1713],{"alt":1714,"src":1607},"Four flex items being contained in a flex container with flex basis property applied",[691,1716,1718],{"id":1717},"conclusion","Conclusion",[682,1720,1721,1722,1727],{},"CSS Flexbox allows us to build layouts on our web pages in many spectacular and flexible ways. In this article, you’ve learned a variety of ways that you can create layouts using this CSS flexbox cheat sheet. So, flex your development muscles with all these flexible ways of ",[699,1723,1726],{"href":1724,"rel":1725},"https:\u002F\u002Fpieces.app\u002Fblog\u002Ffoundation-the-best-framework-for-building-responsive-sites",[703],"building responsive layouts on your websites","!",{"title":883,"searchDepth":1729,"depth":1729,"links":1730},2,[1731,1732,1733,1738,1742,1749,1756],{"id":693,"depth":1729,"text":694},{"id":717,"depth":1729,"text":718},{"id":752,"depth":1729,"text":753,"children":1734},[1735,1737],{"id":760,"depth":1736,"text":761},3,{"id":789,"depth":1736,"text":790},{"id":825,"depth":1729,"text":826,"children":1739},[1740,1741],{"id":838,"depth":1736,"text":839},{"id":853,"depth":1736,"text":854},{"id":902,"depth":1729,"text":903,"children":1743},[1744,1745,1746,1747,1748],{"id":767,"depth":1736,"text":915},{"id":1042,"depth":1736,"text":1043},{"id":1145,"depth":1736,"text":1146},{"id":1305,"depth":1736,"text":1306},{"id":1429,"depth":1736,"text":1430},{"id":1570,"depth":1729,"text":1571,"children":1750},[1751,1752,1753,1754,1755],{"id":1577,"depth":1736,"text":1578},{"id":1610,"depth":1736,"text":1611},{"id":1637,"depth":1736,"text":1638},{"id":1664,"depth":1736,"text":1665},{"id":1691,"depth":1736,"text":1692},{"id":1717,"depth":1729,"text":1718},"Software Development","2023-01-12T00:00:00.000Z","CSS Flexbox makes building flexible layouts possible without the use of CSS float and positioning. In this article, we’ll provide you with a CSS Flexbox cheat sheet.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts\u002Fhero.jpeg","decorative cover image showing two women working on a laptop together",{},"\u002Fblog\u002Fcss-flexbox-cheat-sheet-for-building-layouts",{"title":673,"description":1759},"blog\u002Fcss-flexbox-cheat-sheet-for-building-layouts",[1769],"css; ui","JSY2HL6sp2idoeeIQtKfaSc1aSx_eToM9mJFZkVL3MY",{"id":1772,"title":674,"body":1773,"description":883,"draft":1760,"extension":1761,"meta":1777,"navigation":32,"path":1778,"photo":1779,"photoAlt":676,"seo":1780,"stem":1781,"__hash__":1782},"authors\u002Fauthors\u002Fqueendarlin-nnamani.md",{"type":679,"value":1774,"toc":1775},[],{"title":883,"searchDepth":1729,"depth":1729,"links":1776},[],{},"\u002Fauthors\u002Fqueendarlin-nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fqueendarlin-nnamani.png",{"title":674,"description":883},"authors\u002Fqueendarlin-nnamani","ew_I3Z8CxdVOnSUhwhpJJkL5-zlWp8KOHxMXo_C6lDw",{"left":1784,"top":1784,"width":1785,"height":1785,"rotate":1784,"vFlip":1760,"hFlip":1760,"body":1786},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]