[{"data":1,"prerenderedAt":1156},["ShallowReactive",2],{"guide-flexbox-generator-guide":3},{"id":4,"title":5,"body":6,"date":1148,"description":1149,"extension":1150,"meta":1151,"navigation":266,"path":1152,"readingTime":258,"seo":1153,"stem":1154,"__hash__":1155},"guides\u002Fguides\u002Fflexbox-generator-guide.md","Flexbox Generator Guide: Build CSS Flex Layouts Visually",{"type":7,"value":8,"toc":1129},"minimark",[9,14,27,30,34,37,89,93,98,105,149,152,156,162,216,309,320,351,360,399,403,408,481,562,566,575,634,702,705,709,713,716,834,838,841,930,934,937,983,987,1040,1044,1083,1087,1098,1102,1125],[10,11,13],"h2",{"id":12},"what-is-a-flexbox-generator","What Is a Flexbox Generator?",[15,16,17,18,22,23,26],"p",{},"A flexbox generator is an interactive tool that lets you build CSS flex layouts by adjusting visual controls instead of writing code by hand. You pick properties like ",[19,20,21],"code",{},"flex-direction"," and ",[19,24,25],{},"justify-content",", and the tool generates production-ready CSS instantly.",[15,28,29],{},"Flexbox is powerful but its property组合 can be tricky to memorize. A generator removes the guesswork — you see the result in real time and copy the code when it looks right.",[10,31,33],{"id":32},"why-use-a-flexbox-generator","Why Use a Flexbox Generator?",[15,35,36],{},"Writing flex CSS from scratch works fine for simple cases. But when you need to align items across both axes, handle wrapping, or debug why a layout collapses, a visual tool saves time.",[38,39,40,53],"table",{},[41,42,43],"thead",{},[44,45,46,50],"tr",{},[47,48,49],"th",{},"Benefit",[47,51,52],{},"What It Gives You",[54,55,56,65,73,81],"tbody",{},[44,57,58,62],{},[59,60,61],"td",{},"Instant feedback",[59,63,64],{},"See layout changes as you adjust properties",[44,66,67,70],{},[59,68,69],{},"No syntax errors",[59,71,72],{},"Generated CSS is always valid",[44,74,75,78],{},[59,76,77],{},"Learning aid",[59,79,80],{},"Understand how each property affects the layout",[44,82,83,86],{},[59,84,85],{},"Faster workflow",[59,87,88],{},"Click, preview, copy — skip the edit-refresh cycle",[10,90,92],{"id":91},"step-by-step-core-flex-properties","Step-by-Step: Core Flex Properties",[94,95,97],"h3",{"id":96},"_1-set-the-flex-container","1. Set the Flex Container",[15,99,100,101,104],{},"Every flex layout starts with a container. Add ",[19,102,103],{},"display: flex"," to activate flexbox on a parent element.",[106,107,112],"pre",{"className":108,"code":109,"language":110,"meta":111,"style":111},"language-css shiki shiki-themes github-light github-dark",".container {\n  display: flex;\n}\n","css","",[19,113,114,127,143],{"__ignoreMap":111},[115,116,119,123],"span",{"class":117,"line":118},"line",1,[115,120,122],{"class":121},"sScJk",".container",[115,124,126],{"class":125},"sVt8B"," {\n",[115,128,130,134,137,140],{"class":117,"line":129},2,[115,131,133],{"class":132},"sj4cs","  display",[115,135,136],{"class":125},": ",[115,138,139],{"class":132},"flex",[115,141,142],{"class":125},";\n",[115,144,146],{"class":117,"line":145},3,[115,147,148],{"class":125},"}\n",[15,150,151],{},"This turns all direct children into flex items. They line up in a row by default — no floats, no inline-block hacks needed.",[94,153,155],{"id":154},"_2-choose-a-direction-with-flex-direction","2. Choose a Direction with flex-direction",[15,157,158,159,161],{},"The ",[19,160,21],{}," property controls the main axis — the direction flex items flow.",[38,163,164,174],{},[41,165,166],{},[44,167,168,171],{},[47,169,170],{},"Value",[47,172,173],{},"Direction",[54,175,176,186,196,206],{},[44,177,178,183],{},[59,179,180],{},[19,181,182],{},"row",[59,184,185],{},"Left to right (default)",[44,187,188,193],{},[59,189,190],{},[19,191,192],{},"row-reverse",[59,194,195],{},"Right to left",[44,197,198,203],{},[59,199,200],{},[19,201,202],{},"column",[59,204,205],{},"Top to bottom",[44,207,208,213],{},[59,209,210],{},[19,211,212],{},"column-reverse",[59,214,215],{},"Bottom to top",[106,217,219],{"className":108,"code":218,"language":110,"meta":111,"style":111},"\u002F* Horizontal nav bar *\u002F\n.nav {\n  display: flex;\n  flex-direction: row;\n}\n\n\u002F* Vertical sidebar menu *\u002F\n.sidebar {\n  display: flex;\n  flex-direction: column;\n}\n",[19,220,221,227,234,244,256,261,268,274,282,293,304],{"__ignoreMap":111},[115,222,223],{"class":117,"line":118},[115,224,226],{"class":225},"sJ8bj","\u002F* Horizontal nav bar *\u002F\n",[115,228,229,232],{"class":117,"line":129},[115,230,231],{"class":121},".nav",[115,233,126],{"class":125},[115,235,236,238,240,242],{"class":117,"line":145},[115,237,133],{"class":132},[115,239,136],{"class":125},[115,241,139],{"class":132},[115,243,142],{"class":125},[115,245,247,250,252,254],{"class":117,"line":246},4,[115,248,249],{"class":132},"  flex-direction",[115,251,136],{"class":125},[115,253,182],{"class":132},[115,255,142],{"class":125},[115,257,259],{"class":117,"line":258},5,[115,260,148],{"class":125},[115,262,264],{"class":117,"line":263},6,[115,265,267],{"emptyLinePlaceholder":266},true,"\n",[115,269,271],{"class":117,"line":270},7,[115,272,273],{"class":225},"\u002F* Vertical sidebar menu *\u002F\n",[115,275,277,280],{"class":117,"line":276},8,[115,278,279],{"class":121},".sidebar",[115,281,126],{"class":125},[115,283,285,287,289,291],{"class":117,"line":284},9,[115,286,133],{"class":132},[115,288,136],{"class":125},[115,290,139],{"class":132},[115,292,142],{"class":125},[115,294,296,298,300,302],{"class":117,"line":295},10,[115,297,249],{"class":132},[115,299,136],{"class":125},[115,301,202],{"class":132},[115,303,142],{"class":125},[115,305,307],{"class":117,"line":306},11,[115,308,148],{"class":125},[15,310,311,315,316,319],{},[312,313,314],"strong",{},"Before"," — a vertical list using ",[19,317,318],{},"display: block",":",[106,321,323],{"className":108,"code":322,"language":110,"meta":111,"style":111},".menu-item {\n  display: block;  \u002F* stacks vertically *\u002F\n}\n",[19,324,325,332,347],{"__ignoreMap":111},[115,326,327,330],{"class":117,"line":118},[115,328,329],{"class":121},".menu-item",[115,331,126],{"class":125},[115,333,334,336,338,341,344],{"class":117,"line":129},[115,335,133],{"class":132},[115,337,136],{"class":125},[115,339,340],{"class":132},"block",[115,342,343],{"class":125},";  ",[115,345,346],{"class":225},"\u002F* stacks vertically *\u002F\n",[115,348,349],{"class":117,"line":145},[115,350,148],{"class":125},[15,352,353,356,357,319],{},[312,354,355],{},"After"," — a horizontal row using ",[19,358,359],{},"flex-direction: row",[106,361,363],{"className":108,"code":362,"language":110,"meta":111,"style":111},".menu {\n  display: flex;\n  flex-direction: row;  \u002F* lines up side by side *\u002F\n}\n",[19,364,365,372,382,395],{"__ignoreMap":111},[115,366,367,370],{"class":117,"line":118},[115,368,369],{"class":121},".menu",[115,371,126],{"class":125},[115,373,374,376,378,380],{"class":117,"line":129},[115,375,133],{"class":132},[115,377,136],{"class":125},[115,379,139],{"class":132},[115,381,142],{"class":125},[115,383,384,386,388,390,392],{"class":117,"line":145},[115,385,249],{"class":132},[115,387,136],{"class":125},[115,389,182],{"class":132},[115,391,343],{"class":125},[115,393,394],{"class":225},"\u002F* lines up side by side *\u002F\n",[115,396,397],{"class":117,"line":246},[115,398,148],{"class":125},[94,400,402],{"id":401},"_3-distribute-space-with-justify-content","3. Distribute Space with justify-content",[15,404,405,407],{},[19,406,25],{}," aligns items along the main axis. It controls how free space is distributed.",[38,409,410,419],{},[41,411,412],{},[44,413,414,416],{},[47,415,170],{},[47,417,418],{},"Effect",[54,420,421,431,441,451,461,471],{},[44,422,423,428],{},[59,424,425],{},[19,426,427],{},"flex-start",[59,429,430],{},"Items pack to the start (default)",[44,432,433,438],{},[59,434,435],{},[19,436,437],{},"flex-end",[59,439,440],{},"Items pack to the end",[44,442,443,448],{},[59,444,445],{},[19,446,447],{},"center",[59,449,450],{},"Items center in the container",[44,452,453,458],{},[59,454,455],{},[19,456,457],{},"space-between",[59,459,460],{},"Even space between items, no edge space",[44,462,463,468],{},[59,464,465],{},[19,466,467],{},"space-around",[59,469,470],{},"Equal space around each item",[44,472,473,478],{},[59,474,475],{},[19,476,477],{},"space-evenly",[59,479,480],{},"Equal space between and at edges",[106,482,484],{"className":108,"code":483,"language":110,"meta":111,"style":111},"\u002F* Center a login form *\u002F\n.login-form {\n  display: flex;\n  justify-content: center;\n}\n\n\u002F* Spread nav links across the bar *\u002F\n.nav {\n  display: flex;\n  justify-content: space-between;\n}\n",[19,485,486,491,498,508,519,523,527,532,538,548,558],{"__ignoreMap":111},[115,487,488],{"class":117,"line":118},[115,489,490],{"class":225},"\u002F* Center a login form *\u002F\n",[115,492,493,496],{"class":117,"line":129},[115,494,495],{"class":121},".login-form",[115,497,126],{"class":125},[115,499,500,502,504,506],{"class":117,"line":145},[115,501,133],{"class":132},[115,503,136],{"class":125},[115,505,139],{"class":132},[115,507,142],{"class":125},[115,509,510,513,515,517],{"class":117,"line":246},[115,511,512],{"class":132},"  justify-content",[115,514,136],{"class":125},[115,516,447],{"class":132},[115,518,142],{"class":125},[115,520,521],{"class":117,"line":258},[115,522,148],{"class":125},[115,524,525],{"class":117,"line":263},[115,526,267],{"emptyLinePlaceholder":266},[115,528,529],{"class":117,"line":270},[115,530,531],{"class":225},"\u002F* Spread nav links across the bar *\u002F\n",[115,533,534,536],{"class":117,"line":276},[115,535,231],{"class":121},[115,537,126],{"class":125},[115,539,540,542,544,546],{"class":117,"line":284},[115,541,133],{"class":132},[115,543,136],{"class":125},[115,545,139],{"class":132},[115,547,142],{"class":125},[115,549,550,552,554,556],{"class":117,"line":295},[115,551,512],{"class":132},[115,553,136],{"class":125},[115,555,457],{"class":132},[115,557,142],{"class":125},[115,559,560],{"class":117,"line":306},[115,561,148],{"class":125},[94,563,565],{"id":564},"_4-align-items-on-the-cross-axis","4. Align Items on the Cross Axis",[15,567,568,571,572,574],{},[19,569,570],{},"align-items"," controls how items sit on the cross axis (perpendicular to ",[19,573,21],{},").",[38,576,577,585],{},[41,578,579],{},[44,580,581,583],{},[47,582,170],{},[47,584,418],{},[54,586,587,597,606,615,624],{},[44,588,589,594],{},[59,590,591],{},[19,592,593],{},"stretch",[59,595,596],{},"Items fill the container height (default)",[44,598,599,603],{},[59,600,601],{},[19,602,427],{},[59,604,605],{},"Items align to the top",[44,607,608,612],{},[59,609,610],{},[19,611,437],{},[59,613,614],{},"Items align to the bottom",[44,616,617,621],{},[59,618,619],{},[19,620,447],{},[59,622,623],{},"Items vertically centered",[44,625,626,631],{},[59,627,628],{},[19,629,630],{},"baseline",[59,632,633],{},"Items align by text baseline",[106,635,637],{"className":108,"code":636,"language":110,"meta":111,"style":111},"\u002F* Perfect centering — both axes *\u002F\n.hero {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n}\n",[19,638,639,644,651,661,671,682,698],{"__ignoreMap":111},[115,640,641],{"class":117,"line":118},[115,642,643],{"class":225},"\u002F* Perfect centering — both axes *\u002F\n",[115,645,646,649],{"class":117,"line":129},[115,647,648],{"class":121},".hero",[115,650,126],{"class":125},[115,652,653,655,657,659],{"class":117,"line":145},[115,654,133],{"class":132},[115,656,136],{"class":125},[115,658,139],{"class":132},[115,660,142],{"class":125},[115,662,663,665,667,669],{"class":117,"line":246},[115,664,512],{"class":132},[115,666,136],{"class":125},[115,668,447],{"class":132},[115,670,142],{"class":125},[115,672,673,676,678,680],{"class":117,"line":258},[115,674,675],{"class":132},"  align-items",[115,677,136],{"class":125},[115,679,447],{"class":132},[115,681,142],{"class":125},[115,683,684,687,689,692,696],{"class":117,"line":263},[115,685,686],{"class":132},"  height",[115,688,136],{"class":125},[115,690,691],{"class":132},"100",[115,693,695],{"class":694},"szBVR","vh",[115,697,142],{"class":125},[115,699,700],{"class":117,"line":270},[115,701,148],{"class":125},[15,703,704],{},"Centering content used to require margin hacks or absolute positioning. With flexbox, it is four lines of CSS.",[10,706,708],{"id":707},"common-use-cases","Common Use Cases",[94,710,712],{"id":711},"navigation-bar","Navigation Bar",[15,714,715],{},"A horizontal navbar with links on the left and a button on the right.",[106,717,719],{"className":108,"code":718,"language":110,"meta":111,"style":111},".navbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 1.5rem;\n  height: 64px;\n}\n\n.navbar-links {\n  display: flex;\n  gap: 1.5rem;\n}\n",[19,720,721,728,738,748,758,776,790,794,798,805,815,829],{"__ignoreMap":111},[115,722,723,726],{"class":117,"line":118},[115,724,725],{"class":121},".navbar",[115,727,126],{"class":125},[115,729,730,732,734,736],{"class":117,"line":129},[115,731,133],{"class":132},[115,733,136],{"class":125},[115,735,139],{"class":132},[115,737,142],{"class":125},[115,739,740,742,744,746],{"class":117,"line":145},[115,741,512],{"class":132},[115,743,136],{"class":125},[115,745,457],{"class":132},[115,747,142],{"class":125},[115,749,750,752,754,756],{"class":117,"line":246},[115,751,675],{"class":132},[115,753,136],{"class":125},[115,755,447],{"class":132},[115,757,142],{"class":125},[115,759,760,763,765,768,771,774],{"class":117,"line":258},[115,761,762],{"class":132},"  padding",[115,764,136],{"class":125},[115,766,767],{"class":132},"0",[115,769,770],{"class":132}," 1.5",[115,772,773],{"class":694},"rem",[115,775,142],{"class":125},[115,777,778,780,782,785,788],{"class":117,"line":263},[115,779,686],{"class":132},[115,781,136],{"class":125},[115,783,784],{"class":132},"64",[115,786,787],{"class":694},"px",[115,789,142],{"class":125},[115,791,792],{"class":117,"line":270},[115,793,148],{"class":125},[115,795,796],{"class":117,"line":276},[115,797,267],{"emptyLinePlaceholder":266},[115,799,800,803],{"class":117,"line":284},[115,801,802],{"class":121},".navbar-links",[115,804,126],{"class":125},[115,806,807,809,811,813],{"class":117,"line":295},[115,808,133],{"class":132},[115,810,136],{"class":125},[115,812,139],{"class":132},[115,814,142],{"class":125},[115,816,817,820,822,825,827],{"class":117,"line":306},[115,818,819],{"class":132},"  gap",[115,821,136],{"class":125},[115,823,824],{"class":132},"1.5",[115,826,773],{"class":694},[115,828,142],{"class":125},[115,830,832],{"class":117,"line":831},12,[115,833,148],{"class":125},[94,835,837],{"id":836},"card-row","Card Row",[15,839,840],{},"A row of equal-width cards that wraps on small screens.",[106,842,844],{"className":108,"code":843,"language":110,"meta":111,"style":111},".card-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n}\n\n.card {\n  flex: 1 1 280px; \u002F* grow, shrink, min-width before wrap *\u002F\n}\n",[19,845,846,853,863,875,888,892,896,903,926],{"__ignoreMap":111},[115,847,848,851],{"class":117,"line":118},[115,849,850],{"class":121},".card-row",[115,852,126],{"class":125},[115,854,855,857,859,861],{"class":117,"line":129},[115,856,133],{"class":132},[115,858,136],{"class":125},[115,860,139],{"class":132},[115,862,142],{"class":125},[115,864,865,868,870,873],{"class":117,"line":145},[115,866,867],{"class":132},"  flex-wrap",[115,869,136],{"class":125},[115,871,872],{"class":132},"wrap",[115,874,142],{"class":125},[115,876,877,879,881,884,886],{"class":117,"line":246},[115,878,819],{"class":132},[115,880,136],{"class":125},[115,882,883],{"class":132},"1",[115,885,773],{"class":694},[115,887,142],{"class":125},[115,889,890],{"class":117,"line":258},[115,891,148],{"class":125},[115,893,894],{"class":117,"line":263},[115,895,267],{"emptyLinePlaceholder":266},[115,897,898,901],{"class":117,"line":270},[115,899,900],{"class":121},".card",[115,902,126],{"class":125},[115,904,905,908,910,912,915,918,920,923],{"class":117,"line":276},[115,906,907],{"class":132},"  flex",[115,909,136],{"class":125},[115,911,883],{"class":132},[115,913,914],{"class":132}," 1",[115,916,917],{"class":132}," 280",[115,919,787],{"class":694},[115,921,922],{"class":125},"; ",[115,924,925],{"class":225},"\u002F* grow, shrink, min-width before wrap *\u002F\n",[115,927,928],{"class":117,"line":284},[115,929,148],{"class":125},[94,931,933],{"id":932},"perfect-centering","Perfect Centering",[15,935,936],{},"The classic use case — center anything both horizontally and vertically.",[106,938,940],{"className":108,"code":939,"language":110,"meta":111,"style":111},".centered {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n",[19,941,942,949,959,969,979],{"__ignoreMap":111},[115,943,944,947],{"class":117,"line":118},[115,945,946],{"class":121},".centered",[115,948,126],{"class":125},[115,950,951,953,955,957],{"class":117,"line":129},[115,952,133],{"class":132},[115,954,136],{"class":125},[115,956,139],{"class":132},[115,958,142],{"class":125},[115,960,961,963,965,967],{"class":117,"line":145},[115,962,512],{"class":132},[115,964,136],{"class":125},[115,966,447],{"class":132},[115,968,142],{"class":125},[115,970,971,973,975,977],{"class":117,"line":246},[115,972,675],{"class":132},[115,974,136],{"class":125},[115,976,447],{"class":132},[115,978,142],{"class":125},[115,980,981],{"class":117,"line":258},[115,982,148],{"class":125},[10,984,986],{"id":985},"tips-for-getting-the-most-from-a-generator","Tips for Getting the Most from a Generator",[988,989,990,1002,1014,1024,1034],"ul",{},[991,992,993,996,997,22,999,1001],"li",{},[312,994,995],{},"Start with the container."," Set ",[19,998,103],{},[19,1000,21],{}," first — everything else builds on those choices.",[991,1003,1004,1007,1008,1010,1011,1013],{},[312,1005,1006],{},"Adjust one property at a time."," Change ",[19,1009,25],{},", observe the shift, then move to ",[19,1012,570],{},".",[991,1015,1016,1019,1020,1023],{},[312,1017,1018],{},"Watch the gap property."," Use ",[19,1021,1022],{},"gap"," instead of margins for consistent spacing between flex items.",[991,1025,1026,1029,1030,1033],{},[312,1027,1028],{},"Test wrapping."," Toggle ",[19,1031,1032],{},"flex-wrap: wrap"," and resize items to see how the layout adapts.",[991,1035,1036,1039],{},[312,1037,1038],{},"Copy clean code."," A good generator outputs only the properties you changed — no bloated CSS.",[10,1041,1043],{"id":1042},"key-takeaways","Key Takeaways",[988,1045,1046,1049,1057,1062,1068,1073],{},[991,1047,1048],{},"A flexbox generator lets you build layouts visually and copy the resulting CSS",[991,1050,1051,1053,1054,1056],{},[19,1052,21],{}," defines the main axis; ",[19,1055,25],{}," distributes space along it",[991,1058,1059,1061],{},[19,1060,570],{}," controls the cross-axis alignment",[991,1063,1064,1067],{},[19,1065,1066],{},"flex-wrap"," enables items to flow into multiple lines",[991,1069,158,1070,1072],{},[19,1071,1022],{}," property replaces margin-based spacing between items",[991,1074,1075,1076,1079,1080],{},"Perfect centering is just ",[19,1077,1078],{},"justify-content: center"," + ",[19,1081,1082],{},"align-items: center",[10,1084,1086],{"id":1085},"try-it-yourself","Try It Yourself",[15,1088,1089,1090,1097],{},"Build flex layouts interactively with our ",[1091,1092,1096],"a",{"href":1093,"rel":1094},"https:\u002F\u002Ftoolboxes.site\u002Ftools\u002Fflexbox-generator",[1095],"nofollow","Flexbox Generator",". Adjust direction, alignment, wrapping, and spacing — then copy the CSS straight into your project.",[10,1099,1101],{"id":1100},"related-guides","Related Guides",[988,1103,1104,1111,1118],{},[991,1105,1106,1110],{},[1091,1107,1109],{"href":1108},"\u002Fguides\u002Fcss-flexbox-tutorial","CSS Flexbox Tutorial"," — Deep dive into every flex container and item property",[991,1112,1113,1117],{},[1091,1114,1116],{"href":1115},"\u002Fguides\u002Fcss-layout-methods","CSS Layout Methods"," — Compare Flexbox vs Grid vs traditional approaches",[991,1119,1120,1124],{},[1091,1121,1123],{"href":1122},"\u002Fguides\u002Fcss-design-tips","CSS Design Tips"," — Combine flexbox with gradients and shadows for polished UIs",[1126,1127,1128],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":111,"searchDepth":129,"depth":129,"links":1130},[1131,1132,1133,1139,1144,1145,1146,1147],{"id":12,"depth":129,"text":13},{"id":32,"depth":129,"text":33},{"id":91,"depth":129,"text":92,"children":1134},[1135,1136,1137,1138],{"id":96,"depth":145,"text":97},{"id":154,"depth":145,"text":155},{"id":401,"depth":145,"text":402},{"id":564,"depth":145,"text":565},{"id":707,"depth":129,"text":708,"children":1140},[1141,1142,1143],{"id":711,"depth":145,"text":712},{"id":836,"depth":145,"text":837},{"id":932,"depth":145,"text":933},{"id":985,"depth":129,"text":986},{"id":1042,"depth":129,"text":1043},{"id":1085,"depth":129,"text":1086},{"id":1100,"depth":129,"text":1101},"2026-05-28","Learn how to use a flexbox generator to create CSS flex layouts visually. Step-by-step guide to flex-direction, justify-content, and align-items.","md",{"immutable":266},"\u002Fguides\u002Fflexbox-generator-guide",{"title":5,"description":1149},"guides\u002Fflexbox-generator-guide","PRDdeot9lfvS-CBdObXV_xr76olFhX285tNse7rYYD0",1780401329322]