[{"data":1,"prerenderedAt":1497},["ShallowReactive",2],{"blog-css-flex-demo":3},{"id":4,"title":5,"body":6,"category":56,"date":1485,"description":1486,"draft":1487,"extension":1488,"meta":1489,"navigation":685,"path":1490,"seo":1491,"stem":1492,"tags":1493,"__hash__":1496},"blog\u002Fblog\u002Fcss-flex-demo.md","Flexbox 布局实战",{"type":7,"value":8,"toc":1480},"minimark",[9,13,22,26,53,158,161,170,1471,1474,1477],[10,11,5],"h1",{"id":12},"flexbox-布局实战",[14,15,16,17,21],"p",{},"Flexbox 是前端布局的基础能力之一。下面演示如何用 ",[18,19,20],"code",{},"display: flex"," 让内容在容器中居中。",[23,24,25],"h2",{"id":25},"核心属性",[27,28,29,35,41,47],"ul",{},[30,31,32,34],"li",{},[18,33,20],{}," 启用弹性布局",[30,36,37,40],{},[18,38,39],{},"justify-content"," 控制主轴对齐",[30,42,43,46],{},[18,44,45],{},"align-items"," 控制交叉轴对齐",[30,48,49,52],{},[18,50,51],{},"gap"," 设置子项间距",[54,55,58],"code-block",{"lang":56,"title":57},"css","基础 Flex 居中",[59,60,64],"pre",{"className":61,"code":62,"language":56,"meta":63,"style":63},"language-css shiki shiki-themes github-light github-dark",".container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 200px;\n  gap: 12px;\n}\n","",[18,65,66,79,95,108,120,137,152],{"__ignoreMap":63},[67,68,71,75],"span",{"class":69,"line":70},"line",1,[67,72,74],{"class":73},"sScJk",".container",[67,76,78],{"class":77},"sVt8B"," {\n",[67,80,82,86,89,92],{"class":69,"line":81},2,[67,83,85],{"class":84},"sj4cs","  display",[67,87,88],{"class":77},": ",[67,90,91],{"class":84},"flex",[67,93,94],{"class":77},";\n",[67,96,98,101,103,106],{"class":69,"line":97},3,[67,99,100],{"class":84},"  justify-content",[67,102,88],{"class":77},[67,104,105],{"class":84},"center",[67,107,94],{"class":77},[67,109,111,114,116,118],{"class":69,"line":110},4,[67,112,113],{"class":84},"  align-items",[67,115,88],{"class":77},[67,117,105],{"class":84},[67,119,94],{"class":77},[67,121,123,126,128,131,135],{"class":69,"line":122},5,[67,124,125],{"class":84},"  min-height",[67,127,88],{"class":77},[67,129,130],{"class":84},"200",[67,132,134],{"class":133},"szBVR","px",[67,136,94],{"class":77},[67,138,140,143,145,148,150],{"class":69,"line":139},6,[67,141,142],{"class":84},"  gap",[67,144,88],{"class":77},[67,146,147],{"class":84},"12",[67,149,134],{"class":133},[67,151,94],{"class":77},[67,153,155],{"class":69,"line":154},7,[67,156,157],{"class":77},"}\n",[23,159,160],{"id":160},"交互演示",[14,162,163,164,166,167,169],{},"修改 ",[18,165,39],{}," 或 ",[18,168,45],{},"，观察卡片排列变化：",[171,172,174],"code-playground",{"title":173},"Flex 卡片布局",[59,175,179],{"className":176,"code":177,"language":178,"meta":63,"style":63},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv class=\"wrapper\">\n    \u003Cdiv class=\"toolbar\">\n      \u003Clabel>\n        justify-content\n        \u003Cselect v-model=\"justify\">\n          \u003Coption value=\"flex-start\">flex-start\u003C\u002Foption>\n          \u003Coption value=\"center\">center\u003C\u002Foption>\n          \u003Coption value=\"flex-end\">flex-end\u003C\u002Foption>\n          \u003Coption value=\"space-between\">space-between\u003C\u002Foption>\n          \u003Coption value=\"space-around\">space-around\u003C\u002Foption>\n          \u003Coption value=\"space-evenly\">space-evenly\u003C\u002Foption>\n        \u003C\u002Fselect>\n      \u003C\u002Flabel>\n      \u003Clabel>\n        align-items\n        \u003Cselect v-model=\"align\">\n          \u003Coption value=\"stretch\">stretch\u003C\u002Foption>\n          \u003Coption value=\"flex-start\">flex-start\u003C\u002Foption>\n          \u003Coption value=\"center\">center\u003C\u002Foption>\n          \u003Coption value=\"flex-end\">flex-end\u003C\u002Foption>\n          \u003Coption value=\"baseline\">baseline\u003C\u002Foption>\n        \u003C\u002Fselect>\n      \u003C\u002Flabel>\n    \u003C\u002Fdiv>\n    \u003Cdiv\n      class=\"container\"\n      :style=\"{ justifyContent: justify, alignItems: align }\"\n    >\n      \u003Cdiv v-for=\"item in cards\" :key=\"item\" class=\"card\">\n        Card {{ item }}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst justify = ref('center')\nconst align = ref('center')\nconst cards = [1, 2, 3]\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.wrapper {\n  width: 100%;\n  padding: 12px;\n  font-family: sans-serif;\n  box-sizing: border-box;\n}\n\n.toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-bottom: 12px;\n}\n\nlabel {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 11px;\n  color: #475569;\n}\n\nselect {\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  padding: 6px 8px;\n  background: white;\n  font-size: 11px;\n}\n\n.container {\n  display: flex;\n  flex-wrap: nowrap;\n  width: 100%;\n  box-sizing: border-box;\n  gap: 8px;\n  min-height: 160px;\n  padding: 12px;\n  border-radius: 12px;\n  background: #f8fafc;\n  border: 1px dashed #cbd5e1;\n}\n\n.card {\n  flex: 0 0 auto;\n  min-width: 56px;\n  min-height: 48px;\n  padding: 12px 10px;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #38bdf8, #6366f1);\n  color: white;\n  font-weight: 600;\n  font-size: 12px;\n  text-align: center;\n}\n\u003C\u002Fstyle>\n","vue",[18,180,181,193,213,229,239,244,262,285,306,327,348,369,390,400,410,419,425,441,462,481,500,519,540,549,558,568,576,587,598,604,636,642,651,660,670,680,687,700,715,720,744,762,792,801,806,819,827,843,857,870,883,888,893,901,912,925,939,953,958,963,970,981,994,1008,1023,1036,1041,1046,1053,1073,1088,1106,1119,1132,1137,1142,1149,1160,1172,1185,1196,1209,1223,1236,1249,1261,1279,1284,1289,1297,1316,1331,1345,1363,1377,1408,1419,1432,1445,1457,1462],{"__ignoreMap":63},[67,182,183,186,190],{"class":69,"line":70},[67,184,185],{"class":77},"\u003C",[67,187,189],{"class":188},"s9eBZ","template",[67,191,192],{"class":77},">\n",[67,194,195,198,201,204,207,211],{"class":69,"line":81},[67,196,197],{"class":77},"  \u003C",[67,199,200],{"class":188},"div",[67,202,203],{"class":73}," class",[67,205,206],{"class":77},"=",[67,208,210],{"class":209},"sZZnC","\"wrapper\"",[67,212,192],{"class":77},[67,214,215,218,220,222,224,227],{"class":69,"line":97},[67,216,217],{"class":77},"    \u003C",[67,219,200],{"class":188},[67,221,203],{"class":73},[67,223,206],{"class":77},[67,225,226],{"class":209},"\"toolbar\"",[67,228,192],{"class":77},[67,230,231,234,237],{"class":69,"line":110},[67,232,233],{"class":77},"      \u003C",[67,235,236],{"class":188},"label",[67,238,192],{"class":77},[67,240,241],{"class":69,"line":122},[67,242,243],{"class":77},"        justify-content\n",[67,245,246,249,252,255,257,260],{"class":69,"line":139},[67,247,248],{"class":77},"        \u003C",[67,250,251],{"class":188},"select",[67,253,254],{"class":73}," v-model",[67,256,206],{"class":77},[67,258,259],{"class":209},"\"justify\"",[67,261,192],{"class":77},[67,263,264,267,270,273,275,278,281,283],{"class":69,"line":154},[67,265,266],{"class":77},"          \u003C",[67,268,269],{"class":188},"option",[67,271,272],{"class":73}," value",[67,274,206],{"class":77},[67,276,277],{"class":209},"\"flex-start\"",[67,279,280],{"class":77},">flex-start\u003C\u002F",[67,282,269],{"class":188},[67,284,192],{"class":77},[67,286,288,290,292,294,296,299,302,304],{"class":69,"line":287},8,[67,289,266],{"class":77},[67,291,269],{"class":188},[67,293,272],{"class":73},[67,295,206],{"class":77},[67,297,298],{"class":209},"\"center\"",[67,300,301],{"class":77},">center\u003C\u002F",[67,303,269],{"class":188},[67,305,192],{"class":77},[67,307,309,311,313,315,317,320,323,325],{"class":69,"line":308},9,[67,310,266],{"class":77},[67,312,269],{"class":188},[67,314,272],{"class":73},[67,316,206],{"class":77},[67,318,319],{"class":209},"\"flex-end\"",[67,321,322],{"class":77},">flex-end\u003C\u002F",[67,324,269],{"class":188},[67,326,192],{"class":77},[67,328,330,332,334,336,338,341,344,346],{"class":69,"line":329},10,[67,331,266],{"class":77},[67,333,269],{"class":188},[67,335,272],{"class":73},[67,337,206],{"class":77},[67,339,340],{"class":209},"\"space-between\"",[67,342,343],{"class":77},">space-between\u003C\u002F",[67,345,269],{"class":188},[67,347,192],{"class":77},[67,349,351,353,355,357,359,362,365,367],{"class":69,"line":350},11,[67,352,266],{"class":77},[67,354,269],{"class":188},[67,356,272],{"class":73},[67,358,206],{"class":77},[67,360,361],{"class":209},"\"space-around\"",[67,363,364],{"class":77},">space-around\u003C\u002F",[67,366,269],{"class":188},[67,368,192],{"class":77},[67,370,372,374,376,378,380,383,386,388],{"class":69,"line":371},12,[67,373,266],{"class":77},[67,375,269],{"class":188},[67,377,272],{"class":73},[67,379,206],{"class":77},[67,381,382],{"class":209},"\"space-evenly\"",[67,384,385],{"class":77},">space-evenly\u003C\u002F",[67,387,269],{"class":188},[67,389,192],{"class":77},[67,391,393,396,398],{"class":69,"line":392},13,[67,394,395],{"class":77},"        \u003C\u002F",[67,397,251],{"class":188},[67,399,192],{"class":77},[67,401,403,406,408],{"class":69,"line":402},14,[67,404,405],{"class":77},"      \u003C\u002F",[67,407,236],{"class":188},[67,409,192],{"class":77},[67,411,413,415,417],{"class":69,"line":412},15,[67,414,233],{"class":77},[67,416,236],{"class":188},[67,418,192],{"class":77},[67,420,422],{"class":69,"line":421},16,[67,423,424],{"class":77},"        align-items\n",[67,426,428,430,432,434,436,439],{"class":69,"line":427},17,[67,429,248],{"class":77},[67,431,251],{"class":188},[67,433,254],{"class":73},[67,435,206],{"class":77},[67,437,438],{"class":209},"\"align\"",[67,440,192],{"class":77},[67,442,444,446,448,450,452,455,458,460],{"class":69,"line":443},18,[67,445,266],{"class":77},[67,447,269],{"class":188},[67,449,272],{"class":73},[67,451,206],{"class":77},[67,453,454],{"class":209},"\"stretch\"",[67,456,457],{"class":77},">stretch\u003C\u002F",[67,459,269],{"class":188},[67,461,192],{"class":77},[67,463,465,467,469,471,473,475,477,479],{"class":69,"line":464},19,[67,466,266],{"class":77},[67,468,269],{"class":188},[67,470,272],{"class":73},[67,472,206],{"class":77},[67,474,277],{"class":209},[67,476,280],{"class":77},[67,478,269],{"class":188},[67,480,192],{"class":77},[67,482,484,486,488,490,492,494,496,498],{"class":69,"line":483},20,[67,485,266],{"class":77},[67,487,269],{"class":188},[67,489,272],{"class":73},[67,491,206],{"class":77},[67,493,298],{"class":209},[67,495,301],{"class":77},[67,497,269],{"class":188},[67,499,192],{"class":77},[67,501,503,505,507,509,511,513,515,517],{"class":69,"line":502},21,[67,504,266],{"class":77},[67,506,269],{"class":188},[67,508,272],{"class":73},[67,510,206],{"class":77},[67,512,319],{"class":209},[67,514,322],{"class":77},[67,516,269],{"class":188},[67,518,192],{"class":77},[67,520,522,524,526,528,530,533,536,538],{"class":69,"line":521},22,[67,523,266],{"class":77},[67,525,269],{"class":188},[67,527,272],{"class":73},[67,529,206],{"class":77},[67,531,532],{"class":209},"\"baseline\"",[67,534,535],{"class":77},">baseline\u003C\u002F",[67,537,269],{"class":188},[67,539,192],{"class":77},[67,541,543,545,547],{"class":69,"line":542},23,[67,544,395],{"class":77},[67,546,251],{"class":188},[67,548,192],{"class":77},[67,550,552,554,556],{"class":69,"line":551},24,[67,553,405],{"class":77},[67,555,236],{"class":188},[67,557,192],{"class":77},[67,559,561,564,566],{"class":69,"line":560},25,[67,562,563],{"class":77},"    \u003C\u002F",[67,565,200],{"class":188},[67,567,192],{"class":77},[67,569,571,573],{"class":69,"line":570},26,[67,572,217],{"class":77},[67,574,575],{"class":188},"div\n",[67,577,579,582,584],{"class":69,"line":578},27,[67,580,581],{"class":73},"      class",[67,583,206],{"class":77},[67,585,586],{"class":209},"\"container\"\n",[67,588,590,593,595],{"class":69,"line":589},28,[67,591,592],{"class":73},"      :style",[67,594,206],{"class":77},[67,596,597],{"class":209},"\"{ justifyContent: justify, alignItems: align }\"\n",[67,599,601],{"class":69,"line":600},29,[67,602,603],{"class":77},"    >\n",[67,605,607,609,611,614,616,619,622,624,627,629,631,634],{"class":69,"line":606},30,[67,608,233],{"class":77},[67,610,200],{"class":188},[67,612,613],{"class":73}," v-for",[67,615,206],{"class":77},[67,617,618],{"class":209},"\"item in cards\"",[67,620,621],{"class":73}," :key",[67,623,206],{"class":77},[67,625,626],{"class":209},"\"item\"",[67,628,203],{"class":73},[67,630,206],{"class":77},[67,632,633],{"class":209},"\"card\"",[67,635,192],{"class":77},[67,637,639],{"class":69,"line":638},31,[67,640,641],{"class":77},"        Card {{ item }}\n",[67,643,645,647,649],{"class":69,"line":644},32,[67,646,405],{"class":77},[67,648,200],{"class":188},[67,650,192],{"class":77},[67,652,654,656,658],{"class":69,"line":653},33,[67,655,563],{"class":77},[67,657,200],{"class":188},[67,659,192],{"class":77},[67,661,663,666,668],{"class":69,"line":662},34,[67,664,665],{"class":77},"  \u003C\u002F",[67,667,200],{"class":188},[67,669,192],{"class":77},[67,671,673,676,678],{"class":69,"line":672},35,[67,674,675],{"class":77},"\u003C\u002F",[67,677,189],{"class":188},[67,679,192],{"class":77},[67,681,683],{"class":69,"line":682},36,[67,684,686],{"emptyLinePlaceholder":685},true,"\n",[67,688,690,692,695,698],{"class":69,"line":689},37,[67,691,185],{"class":77},[67,693,694],{"class":188},"script",[67,696,697],{"class":73}," setup",[67,699,192],{"class":77},[67,701,703,706,709,712],{"class":69,"line":702},38,[67,704,705],{"class":133},"import",[67,707,708],{"class":77}," { ref } ",[67,710,711],{"class":133},"from",[67,713,714],{"class":209}," 'vue'\n",[67,716,718],{"class":69,"line":717},39,[67,719,686],{"emptyLinePlaceholder":685},[67,721,723,726,729,732,735,738,741],{"class":69,"line":722},40,[67,724,725],{"class":133},"const",[67,727,728],{"class":84}," justify",[67,730,731],{"class":133}," =",[67,733,734],{"class":73}," ref",[67,736,737],{"class":77},"(",[67,739,740],{"class":209},"'center'",[67,742,743],{"class":77},")\n",[67,745,747,749,752,754,756,758,760],{"class":69,"line":746},41,[67,748,725],{"class":133},[67,750,751],{"class":84}," align",[67,753,731],{"class":133},[67,755,734],{"class":73},[67,757,737],{"class":77},[67,759,740],{"class":209},[67,761,743],{"class":77},[67,763,765,767,770,772,775,778,781,784,786,789],{"class":69,"line":764},42,[67,766,725],{"class":133},[67,768,769],{"class":84}," cards",[67,771,731],{"class":133},[67,773,774],{"class":77}," [",[67,776,777],{"class":84},"1",[67,779,780],{"class":77},", ",[67,782,783],{"class":84},"2",[67,785,780],{"class":77},[67,787,788],{"class":84},"3",[67,790,791],{"class":77},"]\n",[67,793,795,797,799],{"class":69,"line":794},43,[67,796,675],{"class":77},[67,798,694],{"class":188},[67,800,192],{"class":77},[67,802,804],{"class":69,"line":803},44,[67,805,686],{"emptyLinePlaceholder":685},[67,807,809,811,814,817],{"class":69,"line":808},45,[67,810,185],{"class":77},[67,812,813],{"class":188},"style",[67,815,816],{"class":73}," scoped",[67,818,192],{"class":77},[67,820,822,825],{"class":69,"line":821},46,[67,823,824],{"class":73},".wrapper",[67,826,78],{"class":77},[67,828,830,833,835,838,841],{"class":69,"line":829},47,[67,831,832],{"class":84},"  width",[67,834,88],{"class":77},[67,836,837],{"class":84},"100",[67,839,840],{"class":133},"%",[67,842,94],{"class":77},[67,844,846,849,851,853,855],{"class":69,"line":845},48,[67,847,848],{"class":84},"  padding",[67,850,88],{"class":77},[67,852,147],{"class":84},[67,854,134],{"class":133},[67,856,94],{"class":77},[67,858,860,863,865,868],{"class":69,"line":859},49,[67,861,862],{"class":84},"  font-family",[67,864,88],{"class":77},[67,866,867],{"class":84},"sans-serif",[67,869,94],{"class":77},[67,871,873,876,878,881],{"class":69,"line":872},50,[67,874,875],{"class":84},"  box-sizing",[67,877,88],{"class":77},[67,879,880],{"class":84},"border-box",[67,882,94],{"class":77},[67,884,886],{"class":69,"line":885},51,[67,887,157],{"class":77},[67,889,891],{"class":69,"line":890},52,[67,892,686],{"emptyLinePlaceholder":685},[67,894,896,899],{"class":69,"line":895},53,[67,897,898],{"class":73},".toolbar",[67,900,78],{"class":77},[67,902,904,906,908,910],{"class":69,"line":903},54,[67,905,85],{"class":84},[67,907,88],{"class":77},[67,909,91],{"class":84},[67,911,94],{"class":77},[67,913,915,918,920,923],{"class":69,"line":914},55,[67,916,917],{"class":84},"  flex-wrap",[67,919,88],{"class":77},[67,921,922],{"class":84},"wrap",[67,924,94],{"class":77},[67,926,928,930,932,935,937],{"class":69,"line":927},56,[67,929,142],{"class":84},[67,931,88],{"class":77},[67,933,934],{"class":84},"8",[67,936,134],{"class":133},[67,938,94],{"class":77},[67,940,942,945,947,949,951],{"class":69,"line":941},57,[67,943,944],{"class":84},"  margin-bottom",[67,946,88],{"class":77},[67,948,147],{"class":84},[67,950,134],{"class":133},[67,952,94],{"class":77},[67,954,956],{"class":69,"line":955},58,[67,957,157],{"class":77},[67,959,961],{"class":69,"line":960},59,[67,962,686],{"emptyLinePlaceholder":685},[67,964,966,968],{"class":69,"line":965},60,[67,967,236],{"class":188},[67,969,78],{"class":77},[67,971,973,975,977,979],{"class":69,"line":972},61,[67,974,85],{"class":84},[67,976,88],{"class":77},[67,978,91],{"class":84},[67,980,94],{"class":77},[67,982,984,987,989,992],{"class":69,"line":983},62,[67,985,986],{"class":84},"  flex-direction",[67,988,88],{"class":77},[67,990,991],{"class":84},"column",[67,993,94],{"class":77},[67,995,997,999,1001,1004,1006],{"class":69,"line":996},63,[67,998,142],{"class":84},[67,1000,88],{"class":77},[67,1002,1003],{"class":84},"4",[67,1005,134],{"class":133},[67,1007,94],{"class":77},[67,1009,1011,1014,1016,1019,1021],{"class":69,"line":1010},64,[67,1012,1013],{"class":84},"  font-size",[67,1015,88],{"class":77},[67,1017,1018],{"class":84},"11",[67,1020,134],{"class":133},[67,1022,94],{"class":77},[67,1024,1026,1029,1031,1034],{"class":69,"line":1025},65,[67,1027,1028],{"class":84},"  color",[67,1030,88],{"class":77},[67,1032,1033],{"class":84},"#475569",[67,1035,94],{"class":77},[67,1037,1039],{"class":69,"line":1038},66,[67,1040,157],{"class":77},[67,1042,1044],{"class":69,"line":1043},67,[67,1045,686],{"emptyLinePlaceholder":685},[67,1047,1049,1051],{"class":69,"line":1048},68,[67,1050,251],{"class":188},[67,1052,78],{"class":77},[67,1054,1056,1059,1061,1063,1065,1068,1071],{"class":69,"line":1055},69,[67,1057,1058],{"class":84},"  border",[67,1060,88],{"class":77},[67,1062,777],{"class":84},[67,1064,134],{"class":133},[67,1066,1067],{"class":84}," solid",[67,1069,1070],{"class":84}," #cbd5e1",[67,1072,94],{"class":77},[67,1074,1076,1079,1081,1084,1086],{"class":69,"line":1075},70,[67,1077,1078],{"class":84},"  border-radius",[67,1080,88],{"class":77},[67,1082,1083],{"class":84},"6",[67,1085,134],{"class":133},[67,1087,94],{"class":77},[67,1089,1091,1093,1095,1097,1099,1102,1104],{"class":69,"line":1090},71,[67,1092,848],{"class":84},[67,1094,88],{"class":77},[67,1096,1083],{"class":84},[67,1098,134],{"class":133},[67,1100,1101],{"class":84}," 8",[67,1103,134],{"class":133},[67,1105,94],{"class":77},[67,1107,1109,1112,1114,1117],{"class":69,"line":1108},72,[67,1110,1111],{"class":84},"  background",[67,1113,88],{"class":77},[67,1115,1116],{"class":84},"white",[67,1118,94],{"class":77},[67,1120,1122,1124,1126,1128,1130],{"class":69,"line":1121},73,[67,1123,1013],{"class":84},[67,1125,88],{"class":77},[67,1127,1018],{"class":84},[67,1129,134],{"class":133},[67,1131,94],{"class":77},[67,1133,1135],{"class":69,"line":1134},74,[67,1136,157],{"class":77},[67,1138,1140],{"class":69,"line":1139},75,[67,1141,686],{"emptyLinePlaceholder":685},[67,1143,1145,1147],{"class":69,"line":1144},76,[67,1146,74],{"class":73},[67,1148,78],{"class":77},[67,1150,1152,1154,1156,1158],{"class":69,"line":1151},77,[67,1153,85],{"class":84},[67,1155,88],{"class":77},[67,1157,91],{"class":84},[67,1159,94],{"class":77},[67,1161,1163,1165,1167,1170],{"class":69,"line":1162},78,[67,1164,917],{"class":84},[67,1166,88],{"class":77},[67,1168,1169],{"class":84},"nowrap",[67,1171,94],{"class":77},[67,1173,1175,1177,1179,1181,1183],{"class":69,"line":1174},79,[67,1176,832],{"class":84},[67,1178,88],{"class":77},[67,1180,837],{"class":84},[67,1182,840],{"class":133},[67,1184,94],{"class":77},[67,1186,1188,1190,1192,1194],{"class":69,"line":1187},80,[67,1189,875],{"class":84},[67,1191,88],{"class":77},[67,1193,880],{"class":84},[67,1195,94],{"class":77},[67,1197,1199,1201,1203,1205,1207],{"class":69,"line":1198},81,[67,1200,142],{"class":84},[67,1202,88],{"class":77},[67,1204,934],{"class":84},[67,1206,134],{"class":133},[67,1208,94],{"class":77},[67,1210,1212,1214,1216,1219,1221],{"class":69,"line":1211},82,[67,1213,125],{"class":84},[67,1215,88],{"class":77},[67,1217,1218],{"class":84},"160",[67,1220,134],{"class":133},[67,1222,94],{"class":77},[67,1224,1226,1228,1230,1232,1234],{"class":69,"line":1225},83,[67,1227,848],{"class":84},[67,1229,88],{"class":77},[67,1231,147],{"class":84},[67,1233,134],{"class":133},[67,1235,94],{"class":77},[67,1237,1239,1241,1243,1245,1247],{"class":69,"line":1238},84,[67,1240,1078],{"class":84},[67,1242,88],{"class":77},[67,1244,147],{"class":84},[67,1246,134],{"class":133},[67,1248,94],{"class":77},[67,1250,1252,1254,1256,1259],{"class":69,"line":1251},85,[67,1253,1111],{"class":84},[67,1255,88],{"class":77},[67,1257,1258],{"class":84},"#f8fafc",[67,1260,94],{"class":77},[67,1262,1264,1266,1268,1270,1272,1275,1277],{"class":69,"line":1263},86,[67,1265,1058],{"class":84},[67,1267,88],{"class":77},[67,1269,777],{"class":84},[67,1271,134],{"class":133},[67,1273,1274],{"class":84}," dashed",[67,1276,1070],{"class":84},[67,1278,94],{"class":77},[67,1280,1282],{"class":69,"line":1281},87,[67,1283,157],{"class":77},[67,1285,1287],{"class":69,"line":1286},88,[67,1288,686],{"emptyLinePlaceholder":685},[67,1290,1292,1295],{"class":69,"line":1291},89,[67,1293,1294],{"class":73},".card",[67,1296,78],{"class":77},[67,1298,1300,1303,1305,1308,1311,1314],{"class":69,"line":1299},90,[67,1301,1302],{"class":84},"  flex",[67,1304,88],{"class":77},[67,1306,1307],{"class":84},"0",[67,1309,1310],{"class":84}," 0",[67,1312,1313],{"class":84}," auto",[67,1315,94],{"class":77},[67,1317,1319,1322,1324,1327,1329],{"class":69,"line":1318},91,[67,1320,1321],{"class":84},"  min-width",[67,1323,88],{"class":77},[67,1325,1326],{"class":84},"56",[67,1328,134],{"class":133},[67,1330,94],{"class":77},[67,1332,1334,1336,1338,1341,1343],{"class":69,"line":1333},92,[67,1335,125],{"class":84},[67,1337,88],{"class":77},[67,1339,1340],{"class":84},"48",[67,1342,134],{"class":133},[67,1344,94],{"class":77},[67,1346,1348,1350,1352,1354,1356,1359,1361],{"class":69,"line":1347},93,[67,1349,848],{"class":84},[67,1351,88],{"class":77},[67,1353,147],{"class":84},[67,1355,134],{"class":133},[67,1357,1358],{"class":84}," 10",[67,1360,134],{"class":133},[67,1362,94],{"class":77},[67,1364,1366,1368,1370,1373,1375],{"class":69,"line":1365},94,[67,1367,1078],{"class":84},[67,1369,88],{"class":77},[67,1371,1372],{"class":84},"10",[67,1374,134],{"class":133},[67,1376,94],{"class":77},[67,1378,1380,1382,1384,1387,1389,1392,1395,1397,1400,1402,1405],{"class":69,"line":1379},95,[67,1381,1111],{"class":84},[67,1383,88],{"class":77},[67,1385,1386],{"class":84},"linear-gradient",[67,1388,737],{"class":77},[67,1390,1391],{"class":84},"135",[67,1393,1394],{"class":133},"deg",[67,1396,780],{"class":77},[67,1398,1399],{"class":84},"#38bdf8",[67,1401,780],{"class":77},[67,1403,1404],{"class":84},"#6366f1",[67,1406,1407],{"class":77},");\n",[67,1409,1411,1413,1415,1417],{"class":69,"line":1410},96,[67,1412,1028],{"class":84},[67,1414,88],{"class":77},[67,1416,1116],{"class":84},[67,1418,94],{"class":77},[67,1420,1422,1425,1427,1430],{"class":69,"line":1421},97,[67,1423,1424],{"class":84},"  font-weight",[67,1426,88],{"class":77},[67,1428,1429],{"class":84},"600",[67,1431,94],{"class":77},[67,1433,1435,1437,1439,1441,1443],{"class":69,"line":1434},98,[67,1436,1013],{"class":84},[67,1438,88],{"class":77},[67,1440,147],{"class":84},[67,1442,134],{"class":133},[67,1444,94],{"class":77},[67,1446,1448,1451,1453,1455],{"class":69,"line":1447},99,[67,1449,1450],{"class":84},"  text-align",[67,1452,88],{"class":77},[67,1454,105],{"class":84},[67,1456,94],{"class":77},[67,1458,1460],{"class":69,"line":1459},100,[67,1461,157],{"class":77},[67,1463,1465,1467,1469],{"class":69,"line":1464},101,[67,1466,675],{"class":77},[67,1468,813],{"class":188},[67,1470,192],{"class":77},[23,1472,1473],{"id":1473},"实践建议",[14,1475,1476],{},"优先用 Flex 处理一维布局（行或列），二维复杂布局再考虑 Grid。",[813,1478,1479],{},"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 pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":63,"searchDepth":97,"depth":97,"links":1481},[1482,1483,1484],{"id":25,"depth":81,"text":25},{"id":160,"depth":81,"text":160},{"id":1473,"depth":81,"text":1473},"2026-05-01","用 Flex 实现常见的卡片居中布局，并通过代码 playground 直观感受对齐方式的变化。",false,"md",{},"\u002Fblog\u002Fcss-flex-demo",{"title":5,"description":1486},"blog\u002Fcss-flex-demo",[1494,1495],"flexbox","layout","FnnXjd4YEFKibrBnFfTHzIEl4dfl0sklSB-hk3DMocU",1782309645713]