{"id":305,"date":"2026-08-22T10:06:06","date_gmt":"2026-08-22T10:06:06","guid":{"rendered":"https:\/\/netguide.io\/tools\/css-flexbox-generator\/"},"modified":"2026-08-22T10:06:06","modified_gmt":"2026-08-22T10:06:06","slug":"css-flexbox-generator","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/en\/css-flexbox-generator\/","title":{"rendered":"CSS Flexbox Playground"},"content":{"rendered":"<div id=\"netgu-3405725725\" class=\"netgu-before-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"3494115342\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n<style>\n.wp-fx-container { max-width:100%; background:#fff; padding:20px; border:1px solid #ddd; border-radius:10px; font-family:-apple-system, sans-serif; color:#333; }\n.wp-fx-title { margin:0 0 15px 0; color:#2271b1; font-size:1.4rem; }\n.wp-fx-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:10px; }\n.wp-fx-input-group label { display:block; font-size:11px; font-weight:bold; margin-bottom:4px; text-transform:uppercase; color:#666; }\n.wp-fx-input-group input, .wp-fx-input-group select { width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; }\n.wp-fx-checkbox-group { margin:15px 0; font-size:12px; display:flex; align-items:center; gap:8px; color:#666; }\n.wp-fx-note { font-size:12px; color:#666; margin-top:12px; min-height:1em; }\n.wp-fx-warn { color:#d63638; font-weight:bold; }\n.wp-fx-results { margin-top:20px; border-top:2px solid #eee; padding-top:15px; }\n.wp-fx-res-item { display:flex; justify-content:space-between; margin-bottom:6px; font-size:14px; gap:10px; }\n.wp-fx-total { font-weight:bold; font-size:18px; color:#2271b1; margin:10px 0; padding:5px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; }\n.wp-fx-val { color:#2271b1; font-weight:bold; }\n.wp-fx-out { width:100%; box-sizing:border-box; padding:10px; border:1px solid #ccc; border-radius:4px; font-family:monospace; font-size:13px; word-break:break-all; background:#f7f7f7; margin-top:6px; }\n.wp-fx-btn { background:#2271b1; color:#fff; border:none; padding:9px 14px; border-radius:4px; cursor:pointer; font-size:13px; margin-top:10px; }\n<\/style><div class=\"wp-fx-container\">\n  <h3 class=\"wp-fx-title\">CSS Flexbox Playground<\/h3>\n  <div class=\"wp-fx-grid\">\n    <div class=\"wp-fx-input-group\"><label>flex-direction<\/label><select id=\"fx-dir\" onchange=\"genFx()\"><option value=\"row\">row<\/option><option value=\"row-reverse\">row-reverse<\/option><option value=\"column\">column<\/option><option value=\"column-reverse\">column-reverse<\/option><\/select><\/div>\n    <div class=\"wp-fx-input-group\"><label>flex-wrap<\/label><select id=\"fx-wrap\" onchange=\"genFx()\"><option value=\"nowrap\">nowrap<\/option><option value=\"wrap\">wrap<\/option><option value=\"wrap-reverse\">wrap-reverse<\/option><\/select><\/div>\n    <div class=\"wp-fx-input-group\"><label>justify-content<\/label><select id=\"fx-jc\" onchange=\"genFx()\"><option value=\"flex-start\">flex-start<\/option><option value=\"center\">center<\/option><option value=\"flex-end\">flex-end<\/option><option value=\"space-between\">space-between<\/option><option value=\"space-around\">space-around<\/option><option value=\"space-evenly\">space-evenly<\/option><\/select><\/div>\n    <div class=\"wp-fx-input-group\"><label>align-items<\/label><select id=\"fx-ai\" onchange=\"genFx()\"><option value=\"stretch\">stretch<\/option><option value=\"flex-start\">flex-start<\/option><option value=\"center\">center<\/option><option value=\"flex-end\">flex-end<\/option><option value=\"baseline\">baseline<\/option><\/select><\/div>\n    <div class=\"wp-fx-input-group\"><label>gap (px)<\/label><input type=\"number\" id=\"fx-gap\" value=\"8\" min=\"0\" oninput=\"genFx()\"><\/div>\n  <\/div>\n  <div id=\"fx-preview\" style=\"border:1px dashed #bbb;border-radius:8px;padding:12px;margin:14px 0;min-height:120px;background:#fafafa;\"><div style=\"background:#2271b1;color:#fff;width:52px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:bold;\">1<\/div><div style=\"background:#2271b1;color:#fff;width:52px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:bold;\">2<\/div><div style=\"background:#2271b1;color:#fff;width:52px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:bold;\">3<\/div><div style=\"background:#2271b1;color:#fff;width:52px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:bold;\">4<\/div><div style=\"background:#2271b1;color:#fff;width:52px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:bold;\">5<\/div><\/div>\n  <label style=\"display:block;font-size:11px;font-weight:bold;text-transform:uppercase;color:#666;margin:4px 0;\">CSS<\/label>\n  <textarea id=\"fx-out\" class=\"wp-fx-out\" style=\"height:150px;\" readonly><\/textarea>\n  <button class=\"wp-fx-btn\" onclick=\"copyFx()\">Copy CSS<\/button>\n<\/div>\n<script>\nfunction genFx(){\n  var dir=document.getElementById('fx-dir').value; var jc=document.getElementById('fx-jc').value; var ai=document.getElementById('fx-ai').value; var wrap=document.getElementById('fx-wrap').value; var gap=parseInt(document.getElementById('fx-gap').value,10)||0;\n  var prev=document.getElementById('fx-preview');\n  prev.style.display='flex'; prev.style.flexDirection=dir; prev.style.justifyContent=jc; prev.style.alignItems=ai; prev.style.flexWrap=wrap; prev.style.gap=gap+'px';\n  var css='display: flex;\\nflex-direction: '+dir+';\\njustify-content: '+jc+';\\nalign-items: '+ai+';\\nflex-wrap: '+wrap+';\\ngap: '+gap+'px;';\n  document.getElementById('fx-out').value='.container {\\n  '+css.replace(\/\\n\/g,'\\n  ')+'\\n}';\n}\nfunction copyFx(){ var o=document.getElementById('fx-out'); if(!o.value)return; o.focus(); o.select(); try{navigator.clipboard.writeText(o.value);}catch(e){} }\ngenFx();\n<\/script>\n\n\n<div id=\"netgu-881923537\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<!-- NetGuide.io-After-Widget-Tools -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-6258556257245998\"\r\n     data-ad-slot=\"5175852350\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Understand and try out Flexbox<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Flexbox is the most powerful layout tool in CSS \u2013 but the many properties are hard to remember without trying them. In the playground you set them via menus and instantly see how the boxes arrange themselves. The matching CSS code appears below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>flex-direction:<\/strong> orientation of the main axis (row or column).<\/li>\n\n\n<li><strong>justify-content:<\/strong> distribution along the main axis; <strong>align-items:<\/strong> across it.<\/li>\n\n\n<li><strong>wrap &amp; gap:<\/strong> wrapping when space runs out and spacing between elements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Related tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"\/tools\/en\/css-gradient-maker\/\">CSS Gradient Generator<\/a><\/li>\n\n\n<li><a href=\"\/tools\/en\/css-box-shadow-generator\/\">CSS Box-Shadow Generator<\/a><\/li>\n<\/ul>\n\n\n<div id=\"netgu-4290439741\" class=\"netgu-after-content netgu-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-6258556257245998\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-6258556257245998\" \ndata-ad-slot=\"4559785002\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Try Flexbox visually \u2013 flex-direction, justify-content, align-items, wrap and gap with live preview and ready CSS. In the browser.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[160],"tags":[],"class_list":["post-305","post","type-post","status-publish","format-standard","hentry","category-generatoren-en"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":0,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}