e Info Boxes under Add to Cart"}]}]]}],["$","div",null,{"className":"text-xs flex items-center justify-end space-x-3 text-foreground/60","children":["$","div",null,{"className":"hidden md:inline-flex opacity-0 group-hover:opacity-100 items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border-transparent bg-primary hover:bg-primary/80 text-red-600","children":"read article"}]}]]}]}]]]}]]}] f:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Center elements with flexbox / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","3",{"name":"description","content":"Find everything you need for coding and development at dev-resources.site, including tools, guides, and code to streamline your workflow."}],["$","meta","4",{"name":"google-site-verification","content":"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","5",{"name":"google-adsense-account","content":"ca-pub-5834256338017594"}],["$","meta","6",{"name":"google-site-verification","content":"W3xG0R8ES_dhlXhNnP1VNN03oAQG2hYF_1ZCpf5ETak"}],["$","meta","7",{"property":"og:title","content":"Center elements with flexbox / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","8",{"property":"og:description","content":"

Flexbox is a powerful CSS module that makes layout design a breeze. When it comes to centering elements, flexbox is the simplest and most versatile solution.

\n\n

See the following Codepen for a demo:

\n\n

Full article: Center elements with flexbox
\nCSS Snippets

"}],["$","meta","9",{"property":"og:url","content":"https://dev.to/snippflow/center-elements-with-flexbox-9nf"}],["$","meta","10",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","11",{"name":"twitter:title","content":"Center elements with flexbox / Powered by Dev Resource / dev-resources.site 💗"}],["$","meta","12",{"name":"twitter:description","content":"

Flexbox is a powerful CSS module that makes layout design a breeze. When it comes to centering elements, flexbox is the simplest and most versatile solution.

\n\n

See the following Codepen for a demo:

\n\n

Full article: Center elements with flexbox
\nCSS Snippets

"}],["$","link","13",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}]] 3:null 1e:I[7558,["609","static/chunks/609-cc37860f8f268b0f.js","691","static/chunks/app/content/%5B...data%5D/page-2449eaf8da25debc.js"],"default"] 12:"$undefined" 13:"$undefined" 14:"$undefined" 15:"$undefined" 16:"$undefined" 17:"$undefined" 18:"$undefined" 19:"$undefined" 1a:["$","div","8",{"className":"mb-4 prose prose-sm md:prose-base prose-invert prose-neutral max-w-none","children":[["$","div",null,{"className":"mb-4 rounded-xl grid grid-cols-1 border border-neutral-800 divide-y divide-neutral-800 overflow-hidden","children":[["$","div",null,{"className":"p-2 px-4 py-6 flex flex-row justify-between bg-neutral-900 relative","children":["$","h1",null,{"className":"pb-0 mb-0","children":"Center elements with flexbox"}]}],["$","div",null,{"className":"p-2 px-4 flex flex-row justify-between bg-neutral-900 relative","children":[["$","div",null,{"className":"font-bold text-foreground text-xs md:text-base flex items-center justify-center","children":"Published at"}],["$","div",null,{"cl