{"id":304,"date":"2026-08-22T10:06:05","date_gmt":"2026-08-22T10:06:05","guid":{"rendered":"https:\/\/netguide.io\/tools\/css-flexbox-playground\/"},"modified":"2026-08-22T10:06:05","modified_gmt":"2026-08-22T10:06:05","slug":"css-flexbox-playground","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/de\/css-flexbox-playground\/","title":{"rendered":"CSS-Flexbox-Playground"},"content":{"rendered":"<div id=\"netgu-3803578617\" 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()\">CSS kopieren<\/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-1863869192\"><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\">Flexbox verstehen und ausprobieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Flexbox ist das m\u00e4chtigste Layout-Werkzeug in CSS \u2013 aber die vielen Eigenschaften sind ohne Ausprobieren schwer zu merken. Im Playground stellst du sie \u00fcber Men\u00fcs ein und siehst sofort, wie sich die Boxen anordnen. Den passenden CSS-Code gibt es darunter.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>flex-direction:<\/strong> Ausrichtung der Hauptachse (Zeile oder Spalte).<\/li>\n\n\n<li><strong>justify-content:<\/strong> Verteilung entlang der Hauptachse; <strong>align-items:<\/strong> quer dazu.<\/li>\n\n\n<li><strong>wrap &amp; gap:<\/strong> Umbruch bei Platzmangel und Abstand zwischen den Elementen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Verwandte Tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"\/tools\/de\/css-gradient-generator\/\">CSS-Gradient-Generator<\/a><\/li>\n\n\n<li><a href=\"\/tools\/de\/box-shadow-generator\/\">CSS Box-Shadow-Generator<\/a><\/li>\n<\/ul>\n\n\n<div id=\"netgu-3025581179\" 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>Flexbox visuell ausprobieren \u2013 flex-direction, justify-content, align-items, wrap und gap mit Live-Vorschau und fertigem CSS. Im 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":[33],"tags":[],"class_list":["post-304","post","type-post","status-publish","format-standard","hentry","category-generatoren"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/304","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=304"}],"version-history":[{"count":0,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}