[{"data":1,"prerenderedAt":119},["ShallowReactive",2],{"tool-content-en-flexbox-generator":3},{"id":4,"title":5,"body":6,"description":109,"extension":110,"locale":111,"meta":112,"navigation":113,"path":114,"seo":115,"stem":116,"toolId":117,"__hash__":118},"tools\u002Ftools\u002Fen\u002Fflexbox-generator.md","Flexbox Generator",{"type":7,"value":8,"toc":102},"minimark",[9,14,38,42,62,66,99],[10,11,13],"h2",{"id":12},"live-flex-playground","Live flex playground",[15,16,17,18,22,23,26,27,26,30,33,34,37],"p",{},"Adjust ",[19,20,21],"code",{},"flex-direction"," (including reverse directions), ",[19,24,25],{},"flex-wrap",", ",[19,28,29],{},"justify-content",[19,31,32],{},"align-items",", and ",[19,35,36],{},"align-content"," with instant feedback. Row and column gaps are set independently, and demo children can be added or removed one at a time or by count.",[10,39,41],{"id":40},"per-item-properties","Per-item properties",[15,43,44,45,26,48,26,51,54,55,33,58,61],{},"Each demo child has its own ",[19,46,47],{},"flex-grow",[19,49,50],{},"flex-shrink",[19,52,53],{},"flex-basis"," (auto or px), ",[19,56,57],{},"order",[19,59,60],{},"align-self",". Only non-default values are serialized, so the output stays clean. The Navbar preset demonstrates the classic trio: a fixed-width logo, a growing menu, and a static action area.",[10,63,65],{"id":64},"export","Export",[67,68,69,85],"ul",{},[70,71,72,76,77,80,81,84],"li",{},[73,74,75],"strong",{},"CSS",": a complete ",[19,78,79],{},"display: flex; ..."," container declaration, followed by one ",[19,82,83],{},".flex-item:nth-child(n) { ... }"," rule per customized child.",[70,86,87,90,91,94,95,98],{},[73,88,89],{},"Tailwind",": one arbitrary-value class string; item properties use ",[19,92,93],{},"[&>*:nth-child(n)]"," arbitrary variants such as ",[19,96,97],{},"[&>*:nth-child(2)]:[flex:2_1_auto]",".",[15,100,101],{},"Your settings are saved in this browser; layouts saved by an older version migrate automatically. All processing happens locally.",{"title":103,"searchDepth":104,"depth":104,"links":105},"",2,[106,107,108],{"id":12,"depth":104,"text":13},{"id":40,"depth":104,"text":41},{"id":64,"depth":104,"text":65},"Tune flex containers and per-item grow, shrink, basis, order, and align-self with a live preview and CSS or Tailwind export. All local.","md","en",{},true,"\u002Ftools\u002Fen\u002Fflexbox-generator",{"title":5,"description":109},"tools\u002Fen\u002Fflexbox-generator","flexbox-generator","qCP5xaaWXM9jL-81RbxOvK7QTFjEE9Y7j_5Z1WqZwKA",1792391417602]