[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex":1186,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex":1212},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1182,"stem":1183,"id":1184,"extension":1185},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","弹性盒子","Flexbox（CSS Flexible Box Layout，弹性盒布局）是 CSS 中用于一维排版的布局模型：在一条主轴上排列、对齐子项，并分配剩余空间；子项尺寸可以是未知或动态的。","技能小册",[12,13],"css","flex","2020-09-29",false,{"type":17,"value":18,"toc":1148},"minimark",[19,22,31,58,68,73,124,131,165,180,183,190,247,261,271,275,281,294,306,352,371,377,410,417,442,448,479,484,495,505,529,533,549,645,659,664,670,675,686,689,695,704,783,794,798,889,892,917,920,927,930,996,999,1040,1043,1046,1144],[20,21,8],"h1",{"id":8},[23,24,25,26,30],"p",{},"Flexbox（CSS Flexible Box Layout，弹性盒布局）是 CSS 中用于",[27,28,29],"strong",{},"一维","排版的布局模型：在一条主轴上排列、对齐子项，并分配剩余空间；子项尺寸可以是未知或动态的。",[23,32,33,34,38,39,42,43,48,49,53,54,57],{},"在 Flexbox 普及之前，垂直居中、等高列、均分剩余宽度等需求往往要借助浮动、",[35,36,37],"code",{},"table-cell","、",[35,40,41],{},"position"," 等技巧。Flexbox 用「容器 + 主轴\u002F交叉轴」统一了这类问题。需要同时控制行与列时，应优先考虑 ",[44,45,47],"a",{"href":46},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","Grid 网格布局","；子项尺寸与 ",[44,50,52],{"href":51},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","（含 ",[35,55,56],{},"box-sizing","）仍会影响 flex 计算结果。",[23,59,60,61,67],{},"交互式图解：",[44,62,66],{"href":63,"rel":64},"https:\u002F\u002Fflexbox.malven.co\u002F",[65],"nofollow","Flexbox 可视化指南","。",[69,70,72],"h2",{"id":71},"核心概念容器与项目","核心概念：容器与项目",[74,75,76,89],"table",{},[77,78,79],"thead",{},[80,81,82,86],"tr",{},[83,84,85],"th",{},"角色",[83,87,88],{},"说明",[90,91,92,110],"tbody",{},[80,93,94,100],{},[95,96,97],"td",{},[27,98,99],{},"Flex 容器",[95,101,102,105,106,109],{},[35,103,104],{},"display: flex"," 或 ",[35,107,108],{},"display: inline-flex","。后者布局行为相同，但容器本身为行内级，可与文字同一行",[80,111,112,117],{},[95,113,114],{},[27,115,116],{},"Flex 项目",[95,118,119,120,123],{},"容器的",[27,121,122],{},"直接子元素","；更深层后代不是 flex item，除非自身再成为 flex 容器",[23,125,126,127,130],{},"设为 flex 容器后，直系子项默认表现为（等价于 ",[35,128,129],{},"flex: 0 1 auto","）：",[132,133,134,145,155],"ul",{},[135,136,137,140,141,144],"li",{},[35,138,139],{},"flex-direction: row","，沿主轴单行排列，",[35,142,143],{},"flex-wrap: nowrap"," 时不换行；",[135,146,147,150,151,154],{},[35,148,149],{},"flex-grow: 0"," 不主动伸长，",[35,152,153],{},"flex-shrink: 1"," 空间不足时可缩小；",[135,156,157,160,161,164],{},[35,158,159],{},"align-items: stretch","，交叉轴方向拉伸（在交叉轴尺寸为 ",[35,162,163],{},"auto"," 时）。",[23,166,167,168,171,172,175,176,179],{},"Flex 容器会建立 ",[27,169,170],{},"flex 格式化上下文","，其子项之间的",[27,173,174],{},"垂直外边距不会发生折叠","（参见 ",[44,177,178],{"href":51},"盒模型 · 外边距折叠","）。",[69,181,182],{"id":182},"主轴与交叉轴",[23,184,185,186,189],{},"Flexbox 沿",[27,187,188],{},"一条轴","做主要空间分配，另一维由交叉轴对齐或拉伸处理：",[74,191,192,201],{},[77,193,194],{},[80,195,196,199],{},[83,197,198],{},"概念",[83,200,88],{},[90,202,203,217,227],{},[80,204,205,210],{},[95,206,207],{},[27,208,209],{},"主轴（main axis）",[95,211,212,213,216],{},"由 ",[35,214,215],{},"flex-direction"," 决定",[80,218,219,224],{},[95,220,221],{},[27,222,223],{},"交叉轴（cross axis）",[95,225,226],{},"始终垂直于主轴",[80,228,229,234],{},[95,230,231],{},[27,232,233],{},"起点 \u002F 终点",[95,235,236,237,38,240,243,244,246],{},"用 ",[35,238,239],{},"flex-start",[35,241,242],{},"flex-end"," 描述，随书写模式（LTR\u002FRTL）与 ",[35,245,215],{}," 变化，不宜固定说成「左\u002F右\u002F上\u002F下」",[23,248,249,250,252,253,256,257,260],{},"默认 ",[35,251,139],{}," 且为中文横排（LTR）时：主轴多为水平、交叉轴多为垂直。改为 ",[35,254,255],{},"column"," 后，主轴变为垂直，「水平居中 \u002F 垂直居中」应对应到 ",[27,258,259],{},"主轴 \u002F 交叉轴"," 上的属性，而非固定方向。",[262,263,269],"pre",{"className":264,"code":266,"language":267,"meta":268},[265],"language-text","flex-direction: row（默认）          flex-direction: column\n\n  主轴 →                              主轴 ↓\n  ┌───┬───┬───┐                       ┌───┐\n  │   │   │   │  ↑ 交叉轴              │   │\n  └───┴───┴───┘  ↓                    ├───┤\n                                      │   │\n                                      └───┘\n","text","",[35,270,266],{"__ignoreMap":268},[69,272,274],{"id":273},"容器属性写在父元素上","容器属性（写在父元素上）",[276,277,279],"h3",{"id":278},"display",[35,280,278],{},[132,282,283,288],{},[135,284,285,287],{},[35,286,13],{},"：块级 flex 容器。",[135,289,290,293],{},[35,291,292],{},"inline-flex","：行内级 flex 容器。",[276,295,297,299,300,299,303],{"id":296},"flex-direction-flex-wrap-flex-flow",[35,298,215],{}," \u002F ",[35,301,302],{},"flex-wrap",[35,304,305],{},"flex-flow",[132,307,308,323,338],{},[135,309,310,313,314,299,317,299,319,322],{},[35,311,312],{},"row","（默认）\u002F ",[35,315,316],{},"row-reverse",[35,318,255],{},[35,320,321],{},"column-reverse","：主轴方向。",[135,324,325,313,328,299,331,334,335,337],{},[35,326,327],{},"nowrap",[35,329,330],{},"wrap",[35,332,333],{},"wrap-reverse","：是否换行；",[35,336,327],{}," 时项目可能被压缩或溢出。",[135,339,340,342,343,345,346,348,349,67],{},[35,341,305],{},"：",[35,344,215],{}," 与 ",[35,347,302],{}," 的简写，如 ",[35,350,351],{},"flex-flow: row wrap",[23,353,354,355,358,359,362,363,366,367,370],{},"换行后，每一行可视为一条新的主轴轨道；",[35,356,357],{},"justify-content"," 作用于",[27,360,361],{},"当前行内","项目沿主轴的分布，",[35,364,365],{},"align-content"," 才作用于",[27,368,369],{},"多条轨道","在交叉轴方向的分布。",[276,372,374,376],{"id":373},"justify-content主轴对齐与间距",[35,375,357],{},"（主轴对齐与间距）",[132,378,379,388,398,404],{},[135,380,381,299,383,299,385],{},[35,382,239],{},[35,384,242],{},[35,386,387],{},"center",[135,389,390,393,394,397],{},[35,391,392],{},"space-between","：首尾贴容器边，",[27,395,396],{},"项目之间","均分空隙（首尾无额外间隙）",[135,399,400,403],{},[35,401,402],{},"space-around","：每个项目左右（沿主轴）各有一半空隙，首尾也有半隙",[135,405,406,409],{},[35,407,408],{},"space-evenly","：所有空隙（含首尾）相等",[276,411,413,416],{"id":412},"align-items单行内项目在交叉轴上的对齐",[35,414,415],{},"align-items","（单行内，项目在交叉轴上的对齐）",[132,418,419,431],{},[135,420,421,424,425,427,428,430],{},[35,422,423],{},"stretch","（默认）：交叉轴尺寸为 ",[35,426,163],{}," 时拉伸至填满容器交叉轴（",[35,429,312],{}," 下常表现为等高；已设固定交叉轴尺寸则不拉伸）",[135,432,433,299,435,299,437,299,439],{},[35,434,239],{},[35,436,242],{},[35,438,387],{},[35,440,441],{},"baseline",[276,443,445,447],{"id":444},"align-content多行时轨道在交叉轴上的分布",[35,446,365],{},"（多行时，轨道在交叉轴上的分布）",[23,449,450,451,454,455,457,458,461,462,464,465,468,469,471,472,38,474,38,476,478],{},"仅在 ",[35,452,453],{},"flex-wrap: wrap","（或 ",[35,456,333],{},"）且存在",[27,459,460],{},"多条主轴轨道","时有可见效果；只有一行时设置 ",[35,463,365],{}," 一般",[27,466,467],{},"看不出变化","。取值与 ",[35,470,357],{}," 类似（",[35,473,239],{},[35,475,387],{},[35,477,392],{}," 等）。",[276,480,482],{"id":481},"gap",[35,483,481],{},[23,485,486,299,488,299,491,494],{},[35,487,481],{},[35,489,490],{},"row-gap",[35,492,493],{},"column-gap","：项目之间、行与行之间的间距；减少可用于 flex 分配的剩余空间，但不改变对齐规则。可优先于给每个子项加 margin。",[276,496,498,299,501,504],{"id":497},"place-items-place-content简写",[35,499,500],{},"place-items",[35,502,503],{},"place-content","（简写）",[132,506,507,523],{},[135,508,509,512,513,516,517,519,520,522],{},[35,510,511],{},"place-items: \u003Calign-items> \u003Cjustify-items>","（flex 中 ",[35,514,515],{},"justify-items"," 多为 ",[35,518,423],{},"，常用的是 ",[35,521,415],{}," 部分）",[135,524,525,528],{},[35,526,527],{},"place-content: \u003Calign-content> \u003Cjustify-content>","：同时写交叉轴轨道分布与主轴对齐",[69,530,532],{"id":531},"项目属性写在子元素上","项目属性（写在子元素上）",[276,534,536,538,539,299,542,299,545,548],{"id":535},"flexflex-grow-flex-shrink-flex-basis",[35,537,13],{},"（",[35,540,541],{},"flex-grow",[35,543,544],{},"flex-shrink",[35,546,547],{},"flex-basis","）",[74,550,551,564],{},[77,552,553],{},[80,554,555,558,561],{},[83,556,557],{},"写法",[83,559,560],{},"展开（常见解析）",[83,562,563],{},"含义",[90,565,566,583,598,613,632],{},[80,567,568,573,578],{},[95,569,570],{},[35,571,572],{},"flex: initial",[95,574,575],{},[35,576,577],{},"0 1 auto",[95,579,580,581],{},"默认：不伸长，可缩小，基准为 ",[35,582,163],{},[80,584,585,590,595],{},[95,586,587],{},[35,588,589],{},"flex: auto",[95,591,592],{},[35,593,594],{},"1 1 auto",[95,596,597],{},"可伸可缩，基准为内容\u002F宽高",[80,599,600,605,610],{},[95,601,602],{},[35,603,604],{},"flex: none",[95,606,607],{},[35,608,609],{},"0 0 auto",[95,611,612],{},"不伸不缩",[80,614,615,620,625],{},[95,616,617],{},[35,618,619],{},"flex: 1",[95,621,622],{},[35,623,624],{},"1 1 0%",[95,626,627,628,631],{},"均分主轴",[27,629,630],{},"剩余","空间（单数字等价于 grow，basis 为 0）",[80,633,634,639,642],{},[95,635,636],{},[35,637,638],{},"flex: 2 1 200px",[95,640,641],{},"三值完整写法",[95,643,644],{},"按 grow\u002Fshrink\u002Fbasis 参与伸缩",[23,646,647,299,649,651,652,655,656,658],{},[35,648,541],{},[35,650,544],{}," 为",[27,653,654],{},"无单位非负数","，按比例分配剩余空间或收缩量；",[35,657,547],{}," 为分配前的初始主轴尺寸。",[276,660,662],{"id":661},"align-self",[35,663,661],{},[23,665,666,667,669],{},"覆盖容器的 ",[35,668,415],{},"，只影响当前项目。",[276,671,673],{"id":672},"order",[35,674,672],{},[23,676,677,678,681,682,685],{},"改变",[27,679,680],{},"视觉","顺序（数值小的靠前）；",[27,683,684],{},"不改变"," DOM 顺序与屏幕阅读器朗读顺序，勿用于关键交互顺序。",[69,687,688],{"id":688},"典型场景",[276,690,692,693,548],{"id":691},"水平垂直居中默认-row","水平垂直居中（默认 ",[35,694,312],{},[23,696,697,698,105,701,130],{},"容器需有明确的交叉轴空间（如固定 ",[35,699,700],{},"height",[35,702,703],{},"min-height",[262,705,708],{"className":706,"code":707,"language":12,"meta":268,"style":268},"language-css shiki shiki-themes material-theme-lighter github-light github-dark",".container {\n    display: flex;\n    justify-content: center; \u002F* 主轴居中 *\u002F\n    align-items: center; \u002F* 交叉轴居中 *\u002F\n}\n",[35,709,710,727,744,762,777],{"__ignoreMap":268},[711,712,715,719,723],"span",{"class":713,"line":714},"line",1,[711,716,718],{"class":717},"stp6e",".",[711,720,722],{"class":721},"sbgvK","container",[711,724,726],{"class":725},"sP7_E"," {\n",[711,728,730,734,737,741],{"class":713,"line":729},2,[711,731,733],{"class":732},"soE4H","    display",[711,735,736],{"class":725},":",[711,738,740],{"class":739},"s_hVV"," flex",[711,742,743],{"class":725},";\n",[711,745,747,750,752,755,758],{"class":713,"line":746},3,[711,748,749],{"class":732},"    justify-content",[711,751,736],{"class":725},[711,753,754],{"class":739}," center",[711,756,757],{"class":725},";",[711,759,761],{"class":760},"sutJx"," \u002F* 主轴居中 *\u002F\n",[711,763,765,768,770,772,774],{"class":713,"line":764},4,[711,766,767],{"class":732},"    align-items",[711,769,736],{"class":725},[711,771,754],{"class":739},[711,773,757],{"class":725},[711,775,776],{"class":760}," \u002F* 交叉轴居中 *\u002F\n",[711,778,780],{"class":713,"line":779},5,[711,781,782],{"class":725},"}\n",[23,784,785,788,789,791,792,67],{},[35,786,787],{},"flex-direction: column"," 时：垂直分布看 ",[35,790,357],{},"，水平对齐看 ",[35,793,415],{},[276,795,797],{"id":796},"sticky-footer","Sticky Footer",[262,799,801],{"className":706,"code":800,"language":12,"meta":268,"style":268},".page {\n    display: flex;\n    flex-direction: column;\n    min-height: 100dvh; \u002F* 全屏高度；见 [字体单位 · dvh](\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit) *\u002F\n}\n.main {\n    flex: 1; \u002F* 占据剩余高度 *\u002F\n}\n",[35,802,803,812,822,834,854,858,868,884],{"__ignoreMap":268},[711,804,805,807,810],{"class":713,"line":714},[711,806,718],{"class":717},[711,808,809],{"class":721},"page",[711,811,726],{"class":725},[711,813,814,816,818,820],{"class":713,"line":729},[711,815,733],{"class":732},[711,817,736],{"class":725},[711,819,740],{"class":739},[711,821,743],{"class":725},[711,823,824,827,829,832],{"class":713,"line":746},[711,825,826],{"class":732},"    flex-direction",[711,828,736],{"class":725},[711,830,831],{"class":739}," column",[711,833,743],{"class":725},[711,835,836,839,841,845,849,851],{"class":713,"line":764},[711,837,838],{"class":732},"    min-height",[711,840,736],{"class":725},[711,842,844],{"class":843},"srdBf"," 100",[711,846,848],{"class":847},"sw1J6","dvh",[711,850,757],{"class":725},[711,852,853],{"class":760}," \u002F* 全屏高度；见 [字体单位 · dvh](\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit) *\u002F\n",[711,855,856],{"class":713,"line":779},[711,857,782],{"class":725},[711,859,861,863,866],{"class":713,"line":860},6,[711,862,718],{"class":717},[711,864,865],{"class":721},"main",[711,867,726],{"class":725},[711,869,871,874,876,879,881],{"class":713,"line":870},7,[711,872,873],{"class":732},"    flex",[711,875,736],{"class":725},[711,877,878],{"class":843}," 1",[711,880,757],{"class":725},[711,882,883],{"class":760}," \u002F* 占据剩余高度 *\u002F\n",[711,885,887],{"class":713,"line":886},8,[711,888,782],{"class":725},[276,890,891],{"id":891},"等高列与均分宽度",[132,893,894,905],{},[135,895,896,342,899,901,902,904],{},[27,897,898],{},"等高",[35,900,312],{}," + ",[35,903,159],{},"（默认），同一行内交叉轴尺寸一致。",[135,906,907,910,911,913,914,916],{},[27,908,909],{},"均分","：多个子项 ",[35,912,619],{}," 或不同 ",[35,915,541],{}," 分配主轴剩余空间。",[276,918,919],{"id":919},"响应式",[23,921,922,901,924,926],{},[35,923,453],{},[35,925,481],{}," + 媒体查询；复杂二维排版用 Grid。",[69,928,929],{"id":929},"常见注意点",[132,931,932,953,973,983],{},[135,933,249,934,942,943,946,947,38,950,179],{},[27,935,936,299,939],{},[35,937,938],{},"min-width: auto",[35,940,941],{},"min-height: auto"," 会使 flex 项不易缩小到小于内容，导致溢出；需允许收缩时可设 ",[35,944,945],{},"min-width: 0","（或按场景用 ",[35,948,949],{},"overflow",[35,951,952],{},"min-height: 0",[135,954,955,963,964,972],{},[27,956,957,299,959,299,961],{},[35,958,357],{},[35,960,415],{},[35,962,365],{}," 写在容器；",[27,965,966,299,968,299,970],{},[35,967,13],{},[35,969,661],{},[35,971,672],{}," 写在项目。",[135,974,975,976,978,979,105,981,67],{},"仅一行时别指望用 ",[35,977,365],{}," 调间距；多行间距用 ",[35,980,365],{},[35,982,481],{},[135,984,985,987,988,990,991,993,994,67],{},[35,986,619],{}," 分配的是",[27,989,630],{},"空间；若需「按内容宽再伸缩」，用 ",[35,992,589],{}," 或显式 ",[35,995,547],{},[69,997,998],{"id":998},"总结",[132,1000,1001,1016,1024,1033],{},[135,1002,1003,1004,1006,1007,1009,1010,1012,1013,1015],{},"Flexbox 是",[27,1005,29],{},"布局：先定 ",[35,1008,215],{},"，再用 ",[35,1011,357],{},"（主轴）、",[35,1014,415],{},"（交叉轴）对齐。",[135,1017,1018,1019,1021,1022,67],{},"多行时用 ",[35,1020,365],{}," 分布轨道；间距优先 ",[35,1023,481],{},[135,1025,1026,1027,1029,1030,1032],{},"默认子项 ",[35,1028,129],{},"；",[35,1031,619],{}," 适合均分剩余空间与 Sticky Footer。",[135,1034,1035,1036,1039],{},"与 ",[44,1037,1038],{"href":46},"Grid"," 组合：页面骨架用 Grid，组件内一行控件用 Flex。",[69,1041,1042],{"id":1042},"参考文献",[23,1044,1045],{},"以下链接在编写时均可正常访问：",[74,1047,1048,1057],{},[77,1049,1050],{},[80,1051,1052,1055],{},[83,1053,1054],{},"资料",[83,1056,88],{},[90,1058,1059,1071,1085,1097,1109,1121,1133],{},[80,1060,1061,1068],{},[95,1062,1063],{},[44,1064,1067],{"href":1065,"rel":1066},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_flexible_box_layout\u002FBasic_concepts_of_flexbox",[65],"MDN：flex 布局的基本概念",[95,1069,1070],{},"中文：主轴\u002F交叉轴、容器与项目",[80,1072,1073,1080],{},[95,1074,1075],{},[44,1076,1079],{"href":1077,"rel":1078},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fflex",[65],"MDN：flex",[95,1081,1082,1084],{},[35,1083,13],{}," 简写与各关键字取值",[80,1086,1087,1094],{},[95,1088,1089],{},[44,1090,1093],{"href":1091,"rel":1092},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fjustify-content",[65],"MDN：justify-content",[95,1095,1096],{},"主轴对齐与间距关键字",[80,1098,1099,1106],{},[95,1100,1101],{},[44,1102,1105],{"href":1103,"rel":1104},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Falign-items",[65],"MDN：align-items",[95,1107,1108],{},"交叉轴对齐",[80,1110,1111,1118],{},[95,1112,1113],{},[44,1114,1117],{"href":1115,"rel":1116},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-flexbox-1\u002F",[65],"W3C：CSS Flexible Box Layout Module Level 1",[95,1119,1120],{},"官方规范（英文）",[80,1122,1123,1130],{},[95,1124,1125],{},[44,1126,1129],{"href":1127,"rel":1128},"https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fa-guide-to-flexbox\u002F",[65],"CSS-Tricks：A Complete Guide to Flexbox",[95,1131,1132],{},"英文图文完整指南",[80,1134,1135,1141],{},[95,1136,1137],{},[44,1138,1140],{"href":63,"rel":1139},[65],"Flexbox 可视化指南（malven.co）",[95,1142,1143],{},"交互式属性速查",[1145,1146,1147],"style",{},"html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":268,"searchDepth":729,"depth":729,"links":1149},[1150,1151,1152,1166,1172,1179,1180,1181],{"id":71,"depth":729,"text":72},{"id":182,"depth":729,"text":182},{"id":273,"depth":729,"text":274,"children":1153},[1154,1155,1157,1159,1161,1163,1164],{"id":278,"depth":746,"text":278},{"id":296,"depth":746,"text":1156},"flex-direction \u002F flex-wrap \u002F flex-flow",{"id":373,"depth":746,"text":1158},"justify-content（主轴对齐与间距）",{"id":412,"depth":746,"text":1160},"align-items（单行内，项目在交叉轴上的对齐）",{"id":444,"depth":746,"text":1162},"align-content（多行时，轨道在交叉轴上的分布）",{"id":481,"depth":746,"text":481},{"id":497,"depth":746,"text":1165},"place-items \u002F place-content（简写）",{"id":531,"depth":729,"text":532,"children":1167},[1168,1170,1171],{"id":535,"depth":746,"text":1169},"flex（flex-grow \u002F flex-shrink \u002F flex-basis）",{"id":661,"depth":746,"text":661},{"id":672,"depth":746,"text":672},{"id":688,"depth":729,"text":688,"children":1173},[1174,1176,1177,1178],{"id":691,"depth":746,"text":1175},"水平垂直居中（默认 row）",{"id":796,"depth":746,"text":797},{"id":891,"depth":746,"text":891},{"id":919,"depth":746,"text":919},{"id":929,"depth":729,"text":929},{"id":998,"depth":729,"text":998},{"id":1042,"depth":729,"text":1042},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fflex","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fflex.md","md",{"items":1187},[1188,1192,1196,1200,1204,1208],{"path":1189,"title":1190,"description":1191,"category":10,"score":860},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1193,"title":1194,"description":1195,"category":10,"score":860},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1197,"title":1198,"description":1199,"category":10,"score":860},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":1201,"title":1202,"description":1203,"category":10,"score":860},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1205,"title":1206,"description":1207,"category":10,"score":860},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1209,"title":1210,"description":1211,"category":10,"score":860},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1213,"title":12,"items":1214,"index":764,"prev":1273,"next":1274},"booklet\u002Fweb\u002Fcss",[1215,1219,1221,1225,1229,1230,1234,1238,1241,1245,1247,1249,1253,1257,1261,1265,1266,1267,1268,1269],{"path":1216,"title":1217,"date":1218,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":1209,"title":1210,"date":1220,"pinned":15},"2025-05-01",{"path":1222,"title":1223,"date":1224,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1226,"title":1227,"date":1228,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":7,"title":8,"date":14,"pinned":15},{"path":1231,"title":1232,"date":1233,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1235,"title":1236,"date":1237,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":46,"title":1239,"date":1240,"pinned":15},"网格布局","2020-11-09",{"path":1242,"title":1243,"date":1244,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":1189,"title":1190,"date":1246,"pinned":15},"2026-07-23",{"path":51,"title":52,"date":1248,"pinned":15},"2023-09-04",{"path":1250,"title":1251,"date":1252,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","2021-11-09",{"path":1254,"title":1255,"date":1256,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1258,"title":1259,"date":1260,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1262,"title":1263,"date":1264,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":1193,"title":1194,"date":1246,"pinned":15},{"path":1197,"title":1198,"date":1246,"pinned":15},{"path":1201,"title":1202,"date":1246,"pinned":15},{"path":1205,"title":1206,"date":1246,"pinned":15},{"path":1270,"title":1271,"date":1272,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":1226,"title":1227,"date":1228,"pinned":15},{"path":1231,"title":1232,"date":1233,"pinned":15}]