https://rivecn.com/assets/js/100506c2.4fd132e2.js

1"use strict";(self.webpackChunkrive_docs=self.webpackChunkrive_docs||[]).push([[29632],{27833:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>u,frontMatter:()=>a,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"Editor/Layouts/Layout Parameters","title":"\u5e03\u5c40\u53c2\u6570\uff08Layout Parameters\uff09","description":"\u5e03\u5c40\u53c2\u6570\u5927\u81f4\u53ef\u4ee5\u5206\u4e3a\u4e24\u7c7b \u2014 \u5f71\u54cd\u7236\u5e03\u5c40\u7684\u53c2\u6570\u548c\u5f71\u54cd\u5b50\u5e03\u5c40\u7684\u53c2\u6570\u3002","source":"@site/docs/Editor/Layouts/Layout Parameters.md","sourceDirName":"Editor/Layouts","slug":"/Editor/Layouts/Layout Parameters","permalink":"/docs/Editor/Layouts/Layout Parameters","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"tutorialSidebar","previous":{"title":"Layouts Overview","permalink":"/docs/Editor/Layouts/Layouts Overview"},"next":{"title":"\u7ec4\u4ef6\u5c3a\u5bf8\uff08Component Sizing\uff09","permalink":"/docs/Editor/Layouts/Component Sizing"}}');var l=s(74848),r=s(28453),t=s(14252);const a={sidebar_position:2},c="\u5e03\u5c40\u53c2\u6570\uff08Layout Parameters\uff09",d={},o=[{value:"\u7edd\u5bf9\u5b9a\u4f4d\u4e0e\u76f8\u5bf9\u5b9a\u4f4d\uff08Absolute vs relative\uff09",id:"absolute-vs-relative",level:2},{value:"\u7f29\u653e\u7c7b\u578b\uff08Scale types\uff09",id:"scale-types",level:2},{value:"\u5c3a\u5bf8\u7ea6\u675f\uff08Size Constraints\uff09",id:"size-constraints",level:2},{value:"\u88c1\u526a\uff08Clip\uff09",id:"clip",level:2},{value:"\u4f4d\u7f6e\uff08Position\uff09",id:"position",level:2},{value:"\u5185\u8fb9\u8ddd\u548c\u5916\u8fb9\u8ddd\uff08Padding and margin\uff09",id:"padding-and-margin",level:2},{value:"\u5e03\u5c40\u5b50\u9879\uff08Layout children\uff09",id:"layout-children",level:2},{value:"\u65b9\u5411\uff08Direction\uff09",id:"direction",level:2},{value:"\u6362\u884c\uff08Wrap\uff09",id:"wrap",level:2},{value:"\u5bf9\u9f50\uff08Alignment\uff09",id:"alignment",level:2},{value:"\u4e24\u7aef\u5bf9\u9f50\uff08Justify\uff09",id:"justify",level:2},{value:"\u95f4\u8ddd\uff08Gap\uff09",id:"gap",level:2},{value:"\u4ece\u5de6\u5230\u53f3 / \u4ece\u53f3\u5230\u5de6\uff08Left-to-right/right-to-left\uff09",id:"\u4ece\u5de6\u5230\u53f3--\u4ece\u53f3\u5230\u5de6left-to-rightright-to-left",level:2},{value:"\u6837\u5f0f\uff08Styles\uff09",id:"\u6837\u5f0fstyles",level:2}];function h(e){const n={blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{YouTube:i}=n;return i||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("YouTube",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"\u5e03\u5c40\u53c2\u6570layout-parameters",children:"\u5e03\u5c40\u53c2\u6570\uff08Layout Parameters\uff09"})}),"\n","\n",(0,l.jsx)(t.A,{toc:o}),"\n",(0,l.jsx)(n.p,{children:"\u5e03\u5c40\u53c2\u6570\u5927\u81f4\u53ef\u4ee5\u5206\u4e3a\u4e24\u7c7b \u2014 \u5f71\u54cd\u7236\u5e03\u5c40\u7684\u53c2\u6570\u548c\u5f71\u54cd\u5b50\u5e03\u5c40\u7684\u53c2\u6570\u3002"}),"\n",(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsx)(n.p,{children:"\u5728 Rive \u4e2d\uff0c\u91cd\u8981\u7684\u662f\u8981\u8bb0\u4f4f\u5e03\u5c40\u53c2\u6570\u901a\u5e38\u53ea\u5f71\u54cd\u5176\u4ed6\u5e03\u5c40\u5bb9\u5668\u3002\u8fd9\u7ecf\u5e38\u4f1a\u5bfc\u81f4\u4e3a\u4e86\u8fbe\u5230\u9884\u671f\u6548\u679c\u800c\u9700\u8981\u5d4c\u5957\u5e03\u5c40\uff0c\u4f46\u4e5f\u4e3a\u4ee5\u521b\u9020\u6027\u7684\u65b9\u5f0f\u4e0e Rive \u7684\u66f4\u81ea\u7531\u5f62\u5f0f\u7684\u753b\u5e03\u6df7\u5408\u63d0\u4f9b\u4e86\u673a\u4f1a\u3002"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"absolute-vs-relative",children:"\u7edd\u5bf9\u5b9a\u4f4d\u4e0e\u76f8\u5bf9\u5b9a\u4f4d\uff08Absolute vs relative\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u8981\u63a7\u5236\u884c\u3001\u5217\u6216\u7f51\u683c\u4e2d\u5b50\u5e03\u5c40\u7684\u6d41\u52a8\uff0c\u9700\u8981\u5b50\u9879\u662f\u76f8\u5bf9\u5b9a\u4f4d\u7684\uff0c\u5373\u6ca1\u6709\u542f\u7528\u5176\u7edd\u5bf9\u5b9a\u4f4d\u9009\u9879\u3002\u4f7f\u7528\u5e03\u5c40\u68c0\u67e5\u5668\u53f3\u4e0a\u89d2\u7684\u56fe\u6807\u5728\u7edd\u5bf9\u548c\u76f8\u5bf9\u5e03\u5c40\u4e4b\u95f4\u5207\u6362\u3002"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(81614).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u7edd\u5bf9\u5b9a\u4f4d\uff08Absolute\uff09\uff1a"})," \u7edd\u5bf9\u5b9a\u4f4d\u5e03\u5c40\u5728\u753b\u677f\u6216\u7236\u5e03\u5c40\u5bb9\u5668\u5185\u5b9a\u4f4d\u81ea\u5df1\u3002\u5b83\u53ef\u4ee5\u5c06\u5176 2 \u4e2a\u6216\u66f4\u591a\u8fb9\u7f18\u56fa\u5b9a\u5230\u5bb9\u5668\u4e0a\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u76f8\u5bf9\u5b9a\u4f4d\uff08Relative\uff09\uff1a"})," \u76f8\u5bf9\u5b9a\u4f4d\u5e03\u5c40\u7684\u4f4d\u7f6e\u7531\u7236\u753b\u677f\u6216\u5e03\u5c40\u5b9a\u4e49\u3002\u66f4\u6539\u7236\u7ea7\u4e0a\u7684\u5f39\u6027\u5c

15e\u6027\u5c06\u51b3\u5b9a\u5b50\u5e03\u5c40\u7684\u884c\u4e3a\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"scale-types",children:"\u7f29\u653e\u7c7b\u578b\uff08Scale types\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u5e03\u5c40\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u53ef\u4ee5\u4f7f\u7528 3 \u79cd\u4e0d\u540c\u7684\u7f29\u653e\u884c\u4e3a\uff1a"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u56fa\u5b9a\uff08Fixed\uff09\uff1a"})," \u5e03\u5c40\u7684\u56fa\u5b9a\u5bbd\u5ea6\u6216\u9ad8\u5ea6\u3002\u5b9a\u4e49\u7684\u503c\u53ef\u4ee5\u662f\u70b9\u6570\u6216\u767e\u5206\u6bd4\u503c\u3002\u4f7f\u7528\u5b57\u6bb5\u5185\u7684\u5355\u4f4d\u5207\u6362\u5728\u503c\u7c7b\u578b\u4e4b\u95f4\u5207\u6362\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u5305\u88f9\uff08Hug\uff09\uff1a"})," \u5e03\u5c40\u7684\u5bbd\u5ea6\u548c/\u6216\u9ad8\u5ea6\u6536\u7f29\u4ee5\u9002\u5e94\u5176\u5b50\u9879\u3002\u4f8b\u5982\uff0c\u60a8\u53ef\u80fd\u5e0c\u671b\u5e03\u5c40\u5305\u88f9\u6587\u672c\u5bf9\u8c61\uff0c\u6839\u636e\u5185\u90e8\u6587\u672c\u7684\u957f\u5ea6\u8c03\u6574\u5927\u5c0f\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u586b\u5145\uff08Fill\uff09\uff1a"})," \u5e03\u5c40\u7684\u5bbd\u5ea6\u548c/\u6216\u9ad8\u5ea6\u6269\u5c55\u4ee5\u586b\u5145\u7236\u5e03\u5c40\u6216\u753b\u677f\u5185\u7684\u53ef\u7528\u7a7a\u95f4\u3002\u586b\u5145\u9009\u9879\u5c06\u5bbd\u5ea6/\u9ad8\u5ea6\u5b57\u6bb5\u5207\u6362\u4e3a ",(0,l.jsx)(n.code,{children:"fr"}),"\uff08\u586b\u5145\u6bd4\u4f8b\uff09\u5355\u4f4d\uff0c\u5e76\u663e\u793a\u57fa\u7840\u5927\u5c0f\u5b57\u6bb5\u3002\u586b\u5145\u6bd4\u4f8b\u503c\u4f7f\u5f97\u53ef\u4ee5\u63a7\u5236\u5177\u6709\u586b\u5145\u7f29\u653e\u884c\u4e3a\u7684\u591a\u4e2a\u5b50\u9879\u4e4b\u95f4\u7684\u586b\u5145\u884c\u4e3a\u3002\u4f8b\u5982\uff0c\u60a8\u53ef\u80fd\u5e0c\u671b\u5b50\u9879\u5e73\u5747\u586b\u5145\u53ef\u7528\u7a7a\u95f4\uff0c\u6216\u8005\u8ba9\u4e00\u4e2a\u5b50\u9879\u7684\u7f29\u653e\u6bd4\u4f8b\u5927\u4e8e\u5176\u4ed6\u5b50\u9879\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"\u5728\u68c0\u67e5\u5668\u4e2d\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5b57\u6bb5\u4e0b\u65b9\u53ef\u4ee5\u627e\u5230\u8bbe\u7f6e\u7f29\u653e\u7c7b\u578b\u7684\u9009\u9879\u3002"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(65471).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsx)(n.p,{children:"\u5305\u88f9\u548c\u586b\u5145\u9009\u9879\u53ea\u4f1a\u5728\u9002\u7528\u65f6\u663e\u793a\u3002\u4f8b\u5982\uff0c\u6ca1\u6709\u4efb\u4f55\u5b50\u9879\u7684\u5e03\u5c40\u4e0d\u4f1a\u663e\u793a\u5305\u88f9\u9009\u9879\uff0c\u800c\u53ea\u6709\u5177\u6709\u53e6\u4e00\u4e2a\u5e03\u5c40\u4f5c\u4e3a\u7236\u7ea7\u7684\u5e03\u5c40\u624d\u80fd\u8bbe\u7f6e\u4e3a\u586b\u5145\u3002"}),"\n"]}),"\n",(0,l.jsx)(i,{id:"eOGfPV7zBbQ"}),"\n",(0,l.jsx)(n.h2,{id:"size-constraints",children:"\u5c3a\u5bf8\u7ea6\u675f\uff08Size Constraints\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u5207\u6362\u65c1\u8fb9\u7684\u56fe\u6807\u6765\u6dfb\u52a0\u6700\u5c0f\u548c/\u6216\u6700\u5927\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u503c\u3002\u4e0e\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u503c\u672c\u8eab\u4e00\u6837\uff0c\u8fd9\u4e9b\u503c\u53ef\u4ee5\u5b9a\u4e49\u4e3a\u70b9\u6570\u6216\u767e\u5206\u6bd4\u3002"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(2986).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsx)(n.h2,{id:"clip",children:"\u88c1\u526a\uff08Clip\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u88c1\u526a\u5207\u6362\u53ef\u4ee5\u9690\u85cf\u5e03\u5c40\u4e2d\u8d85\u51fa\u5e03\u5c40\u8fb9\u754c\u7684\u4efb\u4f55\u5b50\u5143\u7d20\u3002"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(92110).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsx)(n.h2,{id:"position",children:"\u4f4d\u7f6e\uff08Position\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u7edd\u5bf9\u5b9a\u4f4d\u5e03\u5c40\u63d0\u4f9b\u4e86\u989d\u5916\u7684\u9009\u9879\u6765\u8bbe\u7f6e\u5b83\u4eec\u5728\u753b\u677f\u6216\u7236\u5e03\u5c40\u4e2d\u7684\u4f4d\u7f6e\u3002\u4f4d\u7f6e\u7531\u81f3\u5c11 2 \u4e2a\u56fa\u5b9a\u8fb9\u7f18\u5b9a\u4e49 \u2014 \u4e00\u4e2a\u6c34\u5e73\u548c\u4e00\u4e2a\u5782\u76f4\uff0c\u4f46\u4e5f\u53ef\u4ee5\u542f\u7528\u989d\u5916\u7684\u8fb9\u7f18\u3002"}),"\n",(0,l.jsxs)(n.p,{children:["\u901a\u8fc7\u5728\u68c0\u67e5\u5668\u56fe\u5f62\u4e2d\u9009\u62e9\u6807\u8bb0\u6216\u901a\u8fc7\u4e0b\u65b9\u7684\u5b57\u6bb5\u6765\u8bbe\u7f6e\u8981\u56fa\u5b9a\u7684\u6240\u9700\u8fb9\u7f18\u3002\u60a8\u53ef\u4ee5\u5728\u9

1009\u62e9\u6807\u8bb0\u65f6\u6309\u4f4f ",(0,l.jsx)(n.code,{children:"shift"})," \u6765\u6dfb\u52a0\u540c\u4e00\u8f74\u4e0a\u7684\u7b2c\u4e8c\u4e2a\u8fb9\u7f18\u3002\u4ece\u9009\u5b9a\u8fb9\u7f18\u7684\u8ddd\u79bb\u503c\u53ef\u4ee5\u901a\u8fc7\u5728\u5b57\u6bb5\u4e2d\u9009\u62e9\u6240\u9009\u5355\u4f4d\u7c7b\u578b\u6765\u63d0\u4f9b\u4e3a\u70b9\u6570\u6216\u767e\u5206\u6bd4\u3002"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(51952).A+"",width:"2560",height:"1440"})}),"\n",(0,l.jsx)(n.h2,{id:"padding-and-margin",children:"\u5185\u8fb9\u8ddd\u548c\u5916\u8fb9\u8ddd\uff08Padding and margin\uff09"}),"\n",(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsx)(n.p,{children:"\u5185\u8fb9\u8ddd\u53ea\u5f71\u54cd\u5e03\u5c40\u5b50\u9879\u3002\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u60f3\u62e5\u6709\u4e00\u4e2a\u5e26\u6807\u7b7e\u7684\u6309\u94ae\uff0c\u6587\u672c\u5e94\u8be5\u5305\u88c5\u5728\u4e00\u4e2a\u5e03\u5c40\u4e2d\uff0c\u800c\u8be5\u5e03\u5c40\u5e94\u8be5\u662f\u5e94\u7528\u5185\u8fb9\u8ddd\u7684\u53e6\u4e00\u4e2a\u5e03\u5c40\u7684\u5b50\u9879\u3002"}),"\n"]}),"\n",(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsx)(n.p,{children:"\u5916\u8fb9\u8ddd\u5f71\u54cd\u5e94\u7528\u5916\u8fb9\u8ddd\u7684\u5e03\u5c40\u76f8\u5bf9\u4e8e\u5176\u7236\u5e03\u5c40\u7684\u4f4d\u7f6e\u3002"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"\u5185\u8fb9\u8ddd\u548c\u5916\u8fb9\u8ddd\u53ef\u4ee5\u6cbf\u8f74\u5bf9\u79f0\u5e94\u7528\uff0c\u6216\u5e94\u7528\u4e8e\u5355\u4e2a\u8fb9\u7f18\u3002\u4f7f\u7528\u8fb9\u7f18\u5207\u6362\u6765\u663e\u793a\u6bcf\u4e2a\u8fb9\u7f18\u7684\u5b57\u6bb5\u4ee5\u53ca\u4f7f\u7528\u70b9\u6570\u6216\u767e\u5206\u6bd4\u503c\u7684\u9009\u9879\u3002"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u5185\u8fb9\u8ddd\uff08Padding\uff09\uff1a"})," \u5e03\u5c40\u8fb9\u754c\u548c\u4efb\u4f55\u76f8\u5bf9\u5e03\u5c40\u5b50\u9879\u4e4b\u95f4\u7684\u5185\u90e8\u7a7a\u95f4\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u5916\u8fb9\u8ddd\uff08Margin\uff09\uff1a"})," \u5e03\u5c40\u8fb9\u754c\u548c\u76f8\u5bf9\u7236\u5e03\u5c40\u6216\u753b\u677f\u4e4b\u95f4\u7684\u5916\u90e8\u7a7a\u95f4\u3002"]}),"\n"]}),"\n",(0,l.jsxs)("video",{width:"640",controls:!0,children:[(0,l.jsx)("source",{src:"https://ucarecdn.com/a489bd85-d55b-424b-8f7a-1a1a7aab37f6/",type:"video/mp4"}),(0,l.jsx)(n.p,{children:"\u5185\u8fb9\u8ddd\u548c\u5916\u8fb9\u8ddd"})]}),"\n",(0,l.jsx)(n.h2,{id:"layout-children",children:"\u5e03\u5c40\u5b50\u9879\uff08Layout children\uff09"}),"\n",(0,l.jsxs)(n.blockquote,{children:["\n",(0,l.jsx)(n.p,{children:"\u5e03\u5c40\u7684\u5f39\u6027\u53c2\u6570\u53ea\u5e94\u7528\u4e8e\u5176\u4e2d\u5305\u542b\u7684\u5176\u4ed6\u5e03\u5c40\u3002\u4e3a\u4e86\u751f\u6210\u53ef\u91cd\u6392\u7684\u5185\u5bb9\u884c\u3001\u5217\u548c\u7f51\u683c\uff0c\u5185\u5bb9\u9879\u672c\u8eab\u5fc5\u987b\u5305\u88c5\u5728\u989d\u5916\u7684\u5e03\u5c40\u5bb9\u5668\u4e2d\u3002"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"direction",children:"\u65b9\u5411\uff08Direction\uff09"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u884c\uff08Row\uff09\uff1a"})," \u6cbf\u6c34\u5e73\u8f74\u5e03\u5c40\u5b50\u9879\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u5217\uff08Column\uff09\uff1a"})," \u6cbf\u5782\u76f4\u8f74\u5e03\u5c40\u5b50\u9879\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u884c\u53cd\u8f6c\uff08Row Reverse\uff09\uff1a"})," \u4ee5\u76f8\u53cd\u7684\u987a\u5e8f\u6cbf\u6c34\u5e73\u8f74\u5e03\u5c40\u5b50\u9879\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u5217\u53cd\u8f6c\uff08Column Reverse\uff09\uff1a"})," \u4ee5\u76f8\u53cd\u7684\u987a\u5e8f\u6cbf\u5782\u76f4\u8f74\u5e03\u5c40\u5b50\u9879\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(54837).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsx)(n.h2,{id:"wrap",children:"\u6362\u884c\uff08Wrap\uff09"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u4e0d\u6362\u884c\uff08No Wrap\uff09\uff1a"})," \u5f53\u5185\u5bb9\u8fbe\u5230\u5e03\u5c40\u8fb9\u754c\u65f6\uff0c\u7ee7\u7eed\u5ef6\u4f38\u8d85\u51fa\u8fb9\u754c\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u6362\u884c\uff08Wrap\uff09\uff1a"})," \u5f53\u5185\u5bb9\u8fbe\u5230\u5e03\u5c40\u8fb9\u754c\u65f6\uff0c\u5c06\u4e0b\u4e00\u4e2a\u9879\u76ee\u653e\u5728\u5f53\u524d\u884c/\u5217\u7684\u4e0b\u65b9\u6216\u65c1\u8fb9\u3002"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"\u53cd\u5411\u6362\u884c\uff08Wrap Reverse\uff09\uff1a"})," \u4e0e\u6362\u884c\u76f8\u540c\uff0c\u4f46\u4ee5\u76f8\u53cd\u7684\u987a\u5e8f\u663e\u793a\u5185\u5bb9\u3002"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(583).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsx)(n.h2,{id:"alignment",children:"\u5bf9\u9f50\uff08Alignment\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u9009\u62e9\u68c0\u67e5\u5668\u5c0f\u90e8\u4ef6\u4e0a\u7684\u6240\u9700\u70b9\u6765\u5bf9\u9f50\u5e03\u5c40\u5bb9\u5668\u4e2d\u7684\u5185\u5bb9\u3002"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(17288).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsx)(n.h2,{id:"justify",children:"\u4e24\u7aef\u5bf9\u9f50\uff08Justify\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u70b9\u51fb\u5f53\u524d\u5bf9\u9f50\u4f4d\u7f6e\u4ee5\u5c55\u5f00\u5185\u5bb9\u4ee5\u586b\u5145\u53ef\u7528\u7a7a\u95f4\u3002\u518d\u6b21\u9009\u62e9\u6d3b\u52a8\u56fe\u5757\u5c06\u5185\u5bb9\u6298\u53e0\u56de\u6765\u3002"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{src:"https://ucarecdn.com/d79e6712-f751-4526-951a-0408f9fca6c0/",alt:"\u56fe\u7247"})}),"\n",(0,l.jsx)(n.h2,{id:"gap",children:"\u95f4\u8ddd\uff08Gap\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u5185\u5bb9\u4e4b\u95f4\u7684\u95f4\u8ddd\uff08\u95f4\u9699\uff09\u53ef\u4ee5\u5728\u6c34\u5e73\u548c\u5782\u76f4\u65b9\u5411\u4e0a\u8bbe\u7f6e\uff0c\u5e76\u53ef\u4ee5\u662f\u70b9\u6570\u6216\u5bb9\u5668\u5bbd\u5ea6/\u9ad8\u5ea6\u7684\u767e\u5206\u6bd4\u3002"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.img,{alt:"\u56fe\u7247",src:s(8374).A+"",width:"1280",height:"720"})}),"\n",(0,l.jsx)(n.h2,{id:"\u4ece\u5de6\u5230\u53f3--\u4ece\u53f3\u5230\u5de6left-to-rightright-to-left",children:"\u4ece\u5de6\u5230\u53f3 / \u4ece\u53f3\u5230\u5de6\uff08Left-to-right/right-to-left\uff09"}),"\n",(0,l.jsx)(i,{id:"oLjFOu-UFxM"}),"\n",(0,l.jsx)(n.p,{children:"\u51b3\u5b9a\u6b64\u5e03\u5c40\u7684\u6c34\u5e73\u65b9\u5411\uff0c\u5e76\u4f1a\u7ea7\u8054\u5230\u5176\u5b50\u5e03\u5c40\uff08\u5f53\u5b50\u5e03\u5c40\u8bbe\u7f6e\u4e3a\u7ee7\u627f\u65f6\uff09\u3002\u8fd9\u5c06\u6539\u53d8\u57fa\u4e8e\u884c\u7684\u5e03\u5c40\u65b9\u5411\u4ee5\u53ca\u4efb\u4f55\u5e03\u5c40\u5185\u7684\u6587\u672c\u5bf9\u9f50\u65b9\u5f0f\u3002\u5f53\u9700\u8981\u652f\u6301\u4ece\u53f3\u5230\u5de6\u7684\u8bed\u8a00\u65f6\uff0c\u8fd9\u5f88\u6709\u7528\u3002"}),"\n",(0,l.jsx)(n.h2,{id:"\u6837\u5f0fstyles",children:"\u6837\u5f0f\uff08Styles\uff09"}),"\n",(0,l.jsx)(n.p,{children:"\u5e03\u5c40\u53ef\u4ee5\u50cf Rive \u4e2d\u7684\u5176\u4ed6\u5bf9\u8c61\u4e00\u6837\u62e5\u6709\u586b\u5145\u3001\u63cf\u8fb9\u3001\u7fbd\u5316\u3001\u6df7\u5408\u6a21\u5f0f\u548c\u5706\u89d2\u3002"}),"\n",(0,l.jsxs)(n.p,{children:["\u6837\u5f0f\u53ef\u4ee5\u5728 ",(0,l.jsx)(n.strong,{children:"\u80cc\u666f\uff08background\uff09"})," \u4e2d\u6e32\u67d3\uff0c\u4f4d\u4e8e\u5e03\u5c40\u5b50\u9879\u540e\u9762\uff0c\u6216\u8005\u5728 ",(0,l.jsx)(n.strong,{children:"\u524d\u666f\uff08foreground\uff09"})," \u4e2d\u6e32\u67d3\uff0c\u4f4d\u4e8e\u5b50\u9879\u524d\u9762\u3002\u4f8b\u5982\uff0c\u60a8\u53ef\u4ee5\u5c06\u586b\u5145\u548c\u7fbd\u5316\u9634\u5f71\u653e\u5728\u5b50\u9879\u540e\u9762\uff0c\u540c\u65f6\u5c06\u63cf\u8fb9\u653e\u5728\u524d\u9762\u6e32\u67d3\u3002"]}),"\n",(0,l.jsx)(n.p,{children:"\u5706\u89d2\u9002\u7528\u4e8e\u5e03\u5c40\u7684\u6837\u5f0f\u53ca\u5176\u88c1\u526a\u8fb9\u754c\u3002"})]})}function u(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(h,{...e})}):h(e)}},14252:(e,n,s)=>{s.d(n,{A:()=>t});s(96540);var i=s(35644);const l={tableOfContentsInline:"tableOfContentsInline_prmo"};var r=s(74848);function t({toc:e,minHeadingLevel:n,maxHeadingLevel:s}){return(0,r.jsx)("div",{className:l.tableOfContentsInline,children:(0,r.jsx)(i.A,{toc:e,minHeadingLevel:n,maxHeadingLevel:s,className:"table-of-contents",linkClassName:null})})}},44338:(e,n,s)=>{s.d(n,{A:()=>a});var i=s(96540),l=s(28774),r=s(74848);function t({toc:e,className:n,linkClassName:s,isChild:i}){return e.length?(0,r.jsx)("ul",{className:i?void 0:n,children:e.map((e=>(0,r.jsxs)("li",{children:[(0,r.jsx)(l.A,{to:`#${e.id}`,className:s??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,r.jsx)(t,{isChild:!0,toc:e.children,className:n,linkClassName:s})]},e.id)))}):null}const a=i.memo(t)},37243:(e,n,s)=>{s.d(n,{h:()=>t});var i=s(96540);function l(e){const n=e.map((e=>

1({...e,parentIndex:-1,children:[]}))),s=Array(7).fill(-1);n.forEach(((e,n)=>{const i=s.slice(2,e.level);e.parentIndex=Math.max(...i),s[e.level]=n}));const i=[];return n.forEach((e=>{const{parentIndex:s,...l}=e;s>=0?n[s].children.push(l):i.push(l)})),i}function r({toc:e,minHeadingLevel:n,maxHeadingLevel:s}){return e.flatMap((e=>{const i=r({toc:e.children,minHeadingLevel:n,maxHeadingLevel:s});return function(e){return e.level>=n&&e.level<=s}(e)?[{...e,children:i}]:i}))}function t({toc:e,minHeadingLevel:n,maxHeadingLevel:s}){return(0,i.useMemo)((()=>r({toc:l(e),minHeadingLevel:n,maxHeadingLevel:s})),[e,n,s])}},35644:(e,n,s)=>{s.d(n,{A:()=>j});var i=s(96540),l=s(6342),r=s(37243);function t(e){const n=e.getBoundingClientRect();return n.top===n.bottom?t(e.parentElement):n}function a(e,{anchorTopOffset:n}){const s=e.find((e=>t(e).top>=n));if(s){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(t(s))?s:e[e.indexOf(s)-1]??null}return e[e.length-1]??null}function c(){const e=(0,i.useRef)(0),{navbar:{hideOnScroll:n}}=(0,l.p)();return(0,i.useEffect)((()=>{e.current=n?0:function(){const e=document.querySelector(".navbar");return e?e.clientHeight:0}()}),[n]),e}function d(e){const n=(0,i.useRef)(void 0),s=c();(0,i.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:i,linkActiveClassName:l,minHeadingLevel:r,maxHeadingLevel:t}=e;function c(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(i),c=function({minHeadingLevel:e,maxHeadingLevel:n}){const s=[];for(let i=e;i<=n;i+=1)s.push(`h${i}.anchor`);return Array.from(document.querySelectorAll(s.join()))}({minHeadingLevel:r,maxHeadingLevel:t}),d=a(c,{anchorTopOffset:s.current}),o=e.find((e=>d&&d.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,s){s?(n.current&&n.current!==e&&n.current.classList.remove(l),e.classList.add(l),n.current=e):e.classList.remove(l)}(e,e===o)}))}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}),[e,s])}var o=s(44338),h=s(28774),u=s(34164);const x={cardWrapper:"cardWrapper_VAvj",cardLink:"cardLink_ngIW",cardHeader:"cardHeader_ALAF",hookBadge:"hookBadge_mvKY",arrow:"arrow_MtqY",arrowIcon:"arrowIcon_kYzR",cardBody:"cardBody_wfSI",courseTitle:"courseTitle_PK7S",courseSubtitle:"courseSubtitle_WD2F",tagPills:"tagPills_Y6_V",pill:"pill_oCiV",pillNumber:"pillNumber_eAgW",pillText:"pillText_DbgQ",pillGreen:"pillGreen_XcmA",pillOrange:"pillOrange_iV4i",pillPurple:"pillPurple_FTHJ"};var p=s(74848);function m({className:e,style:n}){return(0,p.jsx)("div",{className:(0,u.A)(x.cardWrapper,e),style:n,children:(0,p.jsxs)(h.A,{to:"/courses",className:x.cardLink,children:[(0,p.jsxs)("div",{className:x.cardHeader,children:[(0,p.jsx)("div",{className:x.hookBadge,children:"\u770b\u6587\u6863\u5361\u4f4f\u4e86\uff1f\u770b\u89c6\u9891\u5b9e\u64cd\u8bfe\u66f4\u76f4\u89c2\uff01"}),(0,p.jsx)("span",{className:x.arrow,"aria-hidden":"true",children:(0,p.jsxs)("svg",{className:x.arrowIcon,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,p.jsx)("line",{x1:"7",y1:"17",x2:"17",y2:"7"}),(0,p.jsx)("polyline",{points:"7 7 17 7 17 17"})]})})]}),(0,p.jsxs)("div",{className:x.cardBody,children:[(0,p.jsx)("div",{className:x.courseTitle,children:"\u56fd\u5185\u9996\u4e2a Rive \u96f6\u57fa\u7840\u4e2d\u6587\u7cfb\u5217\u8bfe"}),(0,p.jsx)("div",{className:x.courseSubtitle,children:"( Rive CEO \u70b9\u8d5e\u8f6c\u53d1 \ud83d\udc4d )"})]}),(0,p.jsxs)("div",{className:x.tagPills,children:[(0,p.jsxs)("div",{className:(0,u.A)(x.pill,x.pillGreen),children:[(0,p.jsx)("span",{className:x.pillNumber,children:"48+"}),(0,p.jsx)("span",{className:x.pillText,children:"\u7ae0\u8282"})]}),(0,p.jsxs)("div",{className:(0,u.A)(x.pill,x.pillOrange),children:[(0,p.jsx)("span",{className:x.pillNumber,children:"4"}),(0,p.jsx)("span",{className:x.pillText,children:"\u5927\u6838\u5fc3\u6a21\u5757"})]}),(0,p.jsxs)("div",{className:(0,u.A)(x.pill,x.pillPurple),children:[(0,p.jsx)("span",{className:x.pillNumber,children:"15+"}),(0,p.jsx)("span",{className:x.pillText,children:"\u5b9e\u6218\u6848\u4f8b"})]})]})]})})}function j({toc:e,className:n="table-of-contents table-of-contents__left-border",linkClassName:s="table-of-contents__link",linkActiveClassName:t,minHeadingLevel:a,maxHeadingLevel:c,...h}){const u=(0,l.p)(),x=a??u.tableOfContents.minHeadingLevel,j=c??u.tableOfContents.maxHeadingLevel,f

1=(0,r.h)({toc:e,minHeadingLevel:x,maxHeadingLevel:j});return d((0,i.useMemo)((()=>{if(s&&t)return{linkClassName:s,linkActiveClassName:t,minHeadingLevel:x,maxHeadingLevel:j}}),[s,t,x,j])),(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o.A,{toc:f,className:n,linkClassName:s,...h}),(0,p.jsx)(m,{})]})}},65471:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/083d008d-6a87-4988-bd2f-5d14ce367217-d523cec82082a3f0790cd9f42c8a74f0.webp"},17288:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/3018db3d-fb86-4a24-9d67-8c16ac6270bd-de74e38217ea653664c539c41e767578.webp"},81614:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/3412f52f-c283-4617-b6c5-f5af8ad1ddcc-632e9a2437d9155473ea6a6ffa8e4516.webp"},92110:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/80299f91-7525-42cc-ba64-20ca7ea7e5ad-35a01212490d6f88dbb34da37d4fdf68.webp"},8374:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/84dba879-e23b-4144-963a-3d4e5f50a144-781bbe1c9d73f95eaf13fe068a47cf64.webp"},583:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/87c797aa-bce4-4e39-b649-63bd382ffb69-c1a077c5b945c8a30f2205590e5abc59.webp"},51952:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/987f6999-4db4-487e-a8f0-c8760b037012-7e9217b46d851da48fe43d93ab7cdeda.webp"},54837:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/c64d65de-0d9e-4325-a1b3-ef7d3310c842-73032f6a21bc975afab48b03fb36f53b.webp"},2986:(e,n,s)=>{s.d(n,{A:()=>i});const i=s.p+"assets/images/d6898bfa-62bf-4d4c-9769-5c68d439e03a-9846024b76a80f6bb5600d3d8a791ec6.webp"},28453:(e,n,s)=>{s.d(n,{R:()=>t,x:()=>a});var i=s(96540);const l={},r=i.createContext(l);function t(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:t(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);