https://preview-9123-ng-zorro-antd.surge.sh/chunk-ITPKNET7.js

1import{a as ce,b as ze}from"./chunk-I7G3U6EJ.js";import{a as S,b as C}from"./chunk-KKGNMDRS.js";import{a as pe,b as ue,c as se}from"./chunk-W2BSQ2AD.js";import{b as v,c as _}from"./chunk-3BI2JMSE.js";import{a as b,g as Q,h as j,m as U,n as X}from"./chunk-2UO6NPYH.js";import"./chunk-3TLZ5TMP.js";import"./chunk-JKD4VGRU.js";import{Dd as V,Ed as Z,Hd as J,Lc as y,Mc as D,Oc as B,Qc as w,Yc as E,_a as P,ad as h,nd as F,zc as R}from"./chunk-BS5JWHVW.js";import{Aa as ne,Ac as O,Bc as L,Gc as n,Ib as z,Ic as de,Lc as f,Mc as x,Nc as g,Ob as ie,Vb as a,cc as oe,ec as le,fc as ae,gc as me,hc as e,ic as t,jc as p,nc as re,qc as N,rb as l,sc as $,xa as s,ya as c,za as te,zc as H}from"./chunk-NACBYLXS.js";import"./chunk-EQDQRRRY.js";var I=class r{justifySegment=["flex-start","center","flex-end","space-between","space-around","space-evenly"];alignSegment=["flex-start","center","flex-end"];selectedJustification="flex-start";selectedLAlignment="flex-start";static \u0275fac=function(i){return new(i||r)};static \u0275cmp=z({type:r,selectors:[["nz-demo-flex-align"]],decls:17,vars:6,consts:[[1,"segment-wrapper"],[3,"ngModelChange","nzOptions","ngModel"],["nz-flex","",1,"btn-wrappers",3,"nzJustify","nzAlign"],["nz-button","","nzType","primary"]],template:function(i,o){i&1&&(e(0,"div",0)(1,"span"),n(2,"Select justify:"),t(),e(3,"nz-segmented",1),g("ngModelChange",function(d){return x(o.selectedJustification,d)||(o.selectedJustification=d),d}),t()(),e(4,"div",0)(5,"span"),n(6,"Select align:"),t(),e(7,"nz-segmented",1),g("ngModelChange",function(d){return x(o.selectedLAlignment,d)||(o.selectedLAlignment=d),d}),t()(),e(8,"div",2)(9,"button",3),n(10,"Primary"),t(),e(11,"button",3),n(12,"Primary"),t(),e(13,"button",3),n(14,"Primary"),t(),e(15,"button",3),n(16,"Primary"),t()()),i&2&&(l(3),a("nzOptions",o.justifySegment),f("ngModel",o.selectedJustification),l(4),a("nzOptions",o.alignSegment),f("ngModel",o.selectedLAlignment),l(),a("nzJustify",o.selectedJustification)("nzAlign",o.selectedLAlignment))},dependencies:[F,E,h,w,B,y,D,C,S,_,v],styles:[".segment-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center;gap:1rem;margin-block-end:1rem}.btn-wrappers[_ngcontent-%COMP%]{block-size:10rem;border:1px solid var(--ant-primary-6)}"]})};var M=class r{isVertical=!1;static \u0275fac=function(i){return new(i||r)};static \u0275cmp=z({type:r,selectors:[["nz-demo-flex-basic"]],decls:10,vars:4,consts:[[3,"ngModelChange","ngModel"],["nz-radio","",3,"nzValue"],["nz-flex","",3,"nzVertical"],[1,"flex-item"],[1,"flex-item","even"]],template:function(i,o){i&1&&(e(0,"nz-radio-group",0),g("ngModelChange",function(d){return x(o.isVertical,d)||(o.isVertical=d),d}),e(1,"label",1),n(2,"horizontal"),t(),e(3,"label",1),n(4,"vertical"),t()(),e(5,"div",2),p(6,"div",3)(7,"div",4)(8,"div",3)(9,"div",4),t()),i&2&&(f("ngModel",o.isVertical),l(),a("nzValue",!1),l(2),a("nzValue",!0),l(2),a("nzVertical",o.isVertical))},dependencies:[F,E,h,C,S,se,ue,pe],styles:["nz-radio-group[_ngcontent-%COMP%]{margin-block-end:1rem}.flex-item[_ngcontent-%COMP%]{inline-size:25%;block-size:54px;background-color:var(--ant-primary-6)}.even[_ngcontent-%COMP%]{background-color:var(--ant-primary-5)}"]})};var T=class r{static \u0275fac=function(i){return new(i||r)};static \u0275cmp=z({type:r,selectors:[["nz-demo-flex-combination"]],decls:7,vars:3,consts:[["nz-flex","",1,"combination-wrapper",3,"nzGap"],["alt","Angular","width","150","height","150","src","https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg"],["nz-flex","",3,"nzVertical","nzGap"]],template:function(i,o){i&1&&(e(0,"div",0),p(1,"img",1),e(2,"div",2)(3,"h2"),n(4," Ant Design of Angular "),t(),e(5,"h3"),n(6," An enterprise-class Angular UI component library based on Ant Design, all components are open source and free to use under MIT license. "),t()()()),i&2&&(a("nzGap",80),l(2),a("nzVertical",!0)("nzGap","large"))},dependencies:[C,S],styles:[".combination-wrapper[_ngcontent-%COMP%]{inline-size:40rem;padding:2rem;border:1px solid #f0f0f0;border-radius:2px}"]})};function Ce(r,m){if(r&1){let i=re();e(0,"nz-slider",8),g("ngModelChange",function(u){te(i);let d=$();return x(d.customGapValue,u)||(d.customGapValue=u),ne(u)}),t()}if(r&2){let i=$();a("nzMin",0)("nzMax",100),f("ngModel",i.customGapValue)}}var G=class r{gapSegment=["small","middle","large","custom"];selectedGap="small";customGapValue=0;static \u0275fac=function(i){return new(i||r)};static \u0275cmp=z({type:r,selectors:[["nz-demo-flex-gap"]],decls:14,vars:4,consts:[[1,"segment-wrapper"],[3,"ngModelChange","nzOptions","ngModel"],[3,"nzMin","nzMax","ngModel"],["nz-flex","",3,"nzGap"],["nz-button","","nzType","primary"],["nz-button","","nzType","dashed"],["nz-button","","nzType","default"],["nz-button","","nzType","link"],[3,"ngModelChange","nzMin","nzMax","ngModel"]],template:function(i,o){i&1&&(e(0,"div",0)(1,"span"),n(2,"Select gap:"),t(),e(3,"nz-segmented",1),g("ngModelChange",function(d){return x(o.selectedGap,d)||(o.selectedGap=d),d}

1),t()(),ie(4,Ce,1,3,"nz-slider",2),e(5,"div",3)(6,"button",4),n(7,"Primary"),t(),e(8,"button",5),n(9,"Dashed"),t(),e(10,"button",6),n(11,"Default"),t(),e(12,"button",7),n(13,"Link"),t()()),i&2&&(l(3),a("nzOptions",o.gapSegment),f("ngModel",o.selectedGap),l(),oe(o.selectedGap==="custom"?4:-1),l(),a("nzGap",o.selectedGap==="custom"?o.customGapValue:o.selectedGap))},dependencies:[F,E,h,w,B,y,D,C,S,_,v,ze,ce],styles:[".segment-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center;gap:1rem;margin-block-end:1rem}"]})};function Ee(r,m){if(r&1&&(e(0,"button",3),n(1),t()),r&2){let i=m.$implicit;l(),de("Button ",i,"")}}var W=class r{wrapSegment=["wrap","wrap-reverse","nowrap"];selectedWrap="wrap";array=Array.from({length:20},(m,i)=>i+1);static \u0275fac=function(i){return new(i||r)};static \u0275cmp=z({type:r,selectors:[["nz-demo-flex-wrap"]],decls:7,vars:4,consts:[[1,"segment-wrapper"],[3,"ngModelChange","nzOptions","ngModel"],["nz-flex","",1,"btn-wrapper",3,"nzGap","nzWrap"],["nz-button","","nzType","primary",2,"width","100px"]],template:function(i,o){i&1&&(e(0,"div",0)(1,"span"),n(2,"Select wrap:"),t(),e(3,"nz-segmented",1),g("ngModelChange",function(d){return x(o.selectedWrap,d)||(o.selectedWrap=d),d}),t()(),e(4,"div",2),ae(5,Ee,2,1,"button",3,le),t()),i&2&&(l(3),a("nzOptions",o.wrapSegment),f("ngModel",o.selectedWrap),l(),a("nzGap","middle")("nzWrap",o.selectedWrap),l(),me(o.array))},dependencies:[F,E,h,w,B,y,D,C,S,_,v],styles:[".segment-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center;gap:1rem;margin-block-end:1rem}.btn-wrapper[_ngcontent-%COMP%]{overflow:auto;padding-block:10px}"]})};var K=class r{expanded=!1;codeBoxes;goLink(m){window&&(window.location.hash=m)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(m=>m.expandCode(this.expanded))}static \u0275fac=function(i){return new(i||r)};static \u0275cmp=z({type:r,selectors:[["nz-demo-flex"]],viewQuery:function(i,o){if(i&1&&H(b,5),i&2){let u;O(u=L())&&(o.codeBoxes=u)}},decls:190,vars:29,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzClick","nzAffix"],["nzHref","#components-flex-demo-basic","nzTitle","\u57FA\u672C\u5E03\u5C40"],["nzHref","#components-flex-demo-align","nzTitle","\u5BF9\u9F50\u65B9\u5F0F"],["nzHref","#components-flex-demo-gap","nzTitle","\u8BBE\u7F6E\u95F4\u9699"],["nzHref","#components-flex-demo-wrap","nzTitle","\u81EA\u52A8\u6362\u884C"],["nzHref","#components-flex-demo-combination","nzTitle","\u7EC4\u5408\u4F7F\u7528"],["nzHref","#api","nzTitle","API"],[1,"markdown"],[1,"subtitle"],[1,"widget"],["aria-label","Edit this page on Github","href","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/doc/index.zh-CN.md","target","_blank","rel","noopener noreferrer",1,"edit-button"],["nzType","edit"],["name","flex","description","\u7528\u4E8E\u5BF9\u9F50\u7684\u5F39\u6027\u5E03\u5C40\u5BB9\u5668\u3002","language","zh"],["id","\u4F55\u65F6\u4F7F\u7528"],["onclick","window.location.hash = '\u4F55\u65F6\u4F7F\u7528'",1,"anchor"],["id","\u4E0E_space_\u7EC4\u4EF6\u7684\u533A\u522B"],["onclick","window.location.hash = '\u4E0E_space_\u7EC4\u4EF6\u7684\u533A\u522B'",1,"anchor"],["nzType","appstore","nz-tooltip","","nzTooltipTitle","\u5C55\u5F00\u5168\u90E8\u4EE3\u7801",1,"code-box-expand-trigger",3,"click"],["nz-row","",3,"nzGutter"],["nz-col","",3,"nzSpan"],["nzTitle","\u57FA\u672C\u5E03\u5C40","nzSelector","nz-demo-flex-basic","nzGenerateCommand","ng g ng-zorro-antd:flex-basic <name>","nzComponentName","NzDemoFlexBasicComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["demo",""],["intro",""],["nzTitle","\u5BF9\u9F50\u65B9\u5F0F","nzSelector","nz-demo-flex-align","nzGenerateCommand","ng g ng-zorro-antd:flex-align <name>","nzComponentName","NzDemoFlexAlignComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["nzTitle","\u8BBE\u7F6E\u95F4\u9699","nzSelector","nz-demo-flex-gap","nzGenerateCommand","ng g ng-zorro-antd:flex-gap <name>","nzComponentName","NzDemoFlexGapComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["nzTitle","\u81EA\u52A8\u6362\u884C","nzSelector","nz-demo-flex-wrap","nzGenerateCommand","ng g ng-zorro-antd:flex-wrap <name>","nzComponentName","NzDemoFlexWrapComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["nzTitle","\u7EC4\u5408\u4F7F\u7528","nzSelector","nz-demo-flex-combination","nzGenerateCommand","ng g ng-zorro-antd:flex-combination <name>","nzComponentName","NzDemoFlexCombinationComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","nz-flex"],[1,"api-type-label","directive"],["onclick","window.location.hash = 'nz-flex'",1,"anchor"],["href","https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content","target","_blank","rel","noopener"],["href","https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items","target","_blank","rel","noopener"],["href","https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap","target","_blank","rel","noopener"],["href","https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex","target","_blank","rel","noopener"]],template:function(i,o){i&1&&(e(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),N("nzClick",function(d){return o.goLink(d)}),p(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5)(7,"nz-link",6)(8,"nz-link",7),t()(),e(9,"section",8)(10,"h1"),n(11,"Flex"),e(12,"span",9),n(13,"\u5F39\u6027\u5E03\u5C40"),t(),p(14,"span",10),e(15,"a",11),p(16,"nz-icon",12),t()(),p(17,"component-meta",13),e(18,"section",8),c(),e(19,"h2",14)(20,"span"),n(21,"\u4F55\u65F6\u4F7F\u7528"),t(),e(22,"a",15),n(23,"#"),t()(),e(24,"ul")(25,"li"),n(26,"\u9002\u5408\u8BBE\u7F6E\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\u3002"),t(),e(27,"li"),n(28,"\u9002\u5408\u8BBE\u7F6E\u5404\u79CD\u6C34\u5E73\u3001\u5782\u76F4\u5BF9\u9F50\u65B9\u5F0F\u3002"),t()(),e(29,"h3",16)(30,"span"),n(31,"\u4E0E Space \u7EC4\u4EF6\u7684\u533A\u522B"),t(),e(32,"a",17),n(33,"#"),t()(),e(34,"ul")(35,"li"),n(36,"

1Space \u4E3A\u5185\u8054\u5143\u7D20\u63D0\u4F9B\u95F4\u8DDD\uFF0C\u5176\u672C\u8EAB\u4F1A\u4E3A\u6BCF\u4E00\u4E2A\u5B50\u5143\u7D20\u6DFB\u52A0\u5305\u88F9\u5143\u7D20\u7528\u4E8E\u5185\u8054\u5BF9\u9F50\u3002\u9002\u7528\u4E8E\u884C\u3001\u5217\u4E2D\u591A\u4E2A\u5B50\u5143\u7D20\u7684\u7B49\u8DDD\u6392\u5217\u3002"),t(),e(37,"li"),n(38,"Flex \u4E3A\u5757\u7EA7\u5143\u7D20\u63D0\u4F9B\u95F4\u8DDD\uFF0C\u5176\u672C\u8EAB\u4E0D\u4F1A\u6DFB\u52A0\u5305\u88F9\u5143\u7D20\u3002\u9002\u7528\u4E8E\u5782\u76F4\u6216\u6C34\u5E73\u65B9\u5411\u4E0A\u7684\u5B50\u5143\u7D20\u5E03\u5C40\uFF0C\u5E76\u63D0\u4F9B\u4E86\u66F4\u591A\u7684\u7075\u6D3B\u6027\u548C\u63A7\u5236\u80FD\u529B\u3002"),t()(),s(),t(),e(39,"h2")(40,"span"),n(41,"\u4EE3\u7801\u6F14\u793A"),t(),e(42,"nz-icon",18),N("click",function(){return o.expandAllCode()}),t()()(),e(43,"div",19)(44,"div",20)(45,"nz-code-box",21),p(46,"nz-demo-flex-basic",22),e(47,"div",23),c(),e(48,"p"),n(49,"\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002"),t(),s(),t()(),e(50,"nz-code-box",24),p(51,"nz-demo-flex-align",22),e(52,"div",23),c(),e(53,"p"),n(54,"\u8BBE\u7F6E\u5BF9\u9F50\u65B9\u5F0F\u3002"),t(),s(),t()(),e(55,"nz-code-box",25),p(56,"nz-demo-flex-gap",22),e(57,"div",23),c(),e(58,"p"),n(59,"\u4F7F\u7528 "),e(60,"code"),n(61,"gap"),t(),n(62," \u8BBE\u7F6E\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9884\u8BBE\u4E86 "),e(63,"code"),n(64,"small"),t(),n(65,"\u3001"),e(66,"code"),n(67,"middle"),t(),n(68,"\u3001"),e(69,"code"),n(70,"large"),t(),n(71," \u4E09\u79CD\u5C3A\u5BF8\uFF0C\u4E5F\u53EF\u4EE5\u81EA\u5B9A\u4E49\u95F4\u8DDD\u3002"),t(),s(),t()(),e(72,"nz-code-box",26),p(73,"nz-demo-flex-wrap",22),e(74,"div",23),c(),e(75,"p"),n(76,"\u81EA\u52A8\u6362\u884C\u3002"),t(),s(),t()(),e(77,"nz-code-box",27),p(78,"nz-demo-flex-combination",22),e(79,"div",23),c(),e(80,"p"),n(81,"\u5D4C\u5957\u4F7F\u7528\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u66F4\u590D\u6742\u7684\u5E03\u5C40\u3002"),t(),s(),t()()()(),e(82,"section",28),c(),e(83,"h2",29)(84,"span"),n(85,"API"),t(),e(86,"a",30),n(87,"#"),t()(),e(88,"h3",31)(89,"span"),n(90,"[nz-flex]"),t(),e(91,"label",32),n(92,"directive"),t(),e(93,"a",33),n(94,"#"),t()(),e(95,"table")(96,"thead")(97,"tr")(98,"th"),n(99,"\u53C2\u6570"),t(),e(100,"th"),n(101,"\u8BF4\u660E"),t(),e(102,"th"),n(103,"\u7C7B\u578B"),t(),e(104,"th"),n(105,"\u9ED8\u8BA4\u503C"),t()()(),e(106,"tbody")(107,"tr")(108,"td")(109,"code"),n(110,"[nzVertical]"),t()(),e(111,"td"),n(112,"\u4F7F\u7528 "),e(113,"code"),n(114,"flex-direction: column"),t(),n(115,"\u63CF\u8FF0flex\u7684\u5782\u76F4\u65B9\u5411"),t(),e(116,"td")(117,"code"),n(118,"boolean"),t()(),e(119,"td")(120,"code"),n(121,"false"),t()()(),e(122,"tr")(123,"td")(124,"code"),n(125,"[nzJustify]"),t()(),e(126,"td"),n(127,"\u8BBE\u7F6E\u5143\u7D20\u5728\u4E3B\u8F74\u65B9\u5411\u4E0A\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53C2\u7167 "),e(128,"a",34),n(129,"justify-content"),t()(),e(130,"td")(131,"code"),n(132,"NzJustify"),t()(),e(133,"td")(134,"code"),n(135,"'normal'"),t()()(),e(136,"tr")(137,"td")(138,"code"),n(139,"[nzAlign]"),t()(),e(140,"td"),n(141,"\u8BBE\u7F6E\u5143\u7D20\u5728\u4EA4\u53C9\u8F74\u65B9\u5411\u4E0A\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53C2\u7167 "),e(142,"a",35),n(143,"align-items"),t()(),e(144,"td")(145,"code"),n(146,"NzAlign"),t()(),e(147,"td")(148,"code"),n(149,"'normal'"),t()()(),e(150,"tr")(151,"td")(152,"code"),n(153,"[nzGap]"),t()(),e(154,"td"),n(155,"\u8BBE\u7F6E\u9879\u76EE\u7684\u95F4\u9699"),t(),e(156,"td")(157,"code"),n(158,"'small' | 'middle' | 'large' | number | string"),t()(),e(159,"td")(160,"code"),n(161,"0"),t()()(),e(162,"tr")(163,"td")(164,"code"),n(165,"[nzWrap]"),t()(),e(166,"td"),n(167,"\u6307\u5B9A flex \u5143\u7D20\u5355\u884C\u663E\u793A\u8FD8\u662F\u591A\u884C\u663E\u793A\uFF0C\u53C2\u7167 "),e(168,"a",36),n(169,"flex-wrap"),t()(),e(170,"td")(171,"code"),n(172,"NzWrap"),t()(),e(173,"td")(174,"code"),n(175,"'nowrap'"),t()()(),e(176,"tr")(177,"td")(178,"code"),n(179,"[nzFlex]"),t()(),e(180,"td"),n(181,"flex css\u7B80\u5199\u5C5E\u6027\uFF0C\u53C2\u7167 "),e(182,"a",37),n(183,"flex"),t()(),e(184,"td")(185,"code"),n(186,"NzFlex"),t()(),e(187,"td")(188,"code"),n(189,"'unset'"),t()()()()(),s(),t()()),i&2&&(l(),a("nzOffsetTop",16),l(),a("nzAffix",!1),l(41),a("nzGutter",8),l(),a("nzSpan",24),l(),a("nzId","components-flex-demo-basic")("nzLink","components-flex-demo-basic")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/basic.md"),l(5),a("nzId","components-flex-demo-align")("nzLink","components-flex-demo-align")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/align.md"),l(5),a("nzId","components-flex-demo-gap")("nzLink","components-flex-demo-gap")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/gap.md"),l(1

17),a("nzId","components-flex-demo-wrap")("nzLink","components-flex-demo-wrap")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/wrap.md"),l(5),a("nzId","components-flex-demo-combination")("nzLink","components-flex-demo-combination")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/combination.md"))},dependencies:[X,b,U,Q,j,J,Z,V,R,P,I,M,T,G,W],encapsulation:2})};var Y=class r{expanded=!1;codeBoxes;goLink(m){window&&(window.location.hash=m)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(m=>m.expandCode(this.expanded))}static \u0275fac=function(i){return new(i||r)};static \u0275cmp=z({type:r,selectors:[["nz-demo-flex"]],viewQuery:function(i,o){if(i&1&&H(b,5),i&2){let u;O(u=L())&&(o.codeBoxes=u)}},decls:184,vars:29,consts:[[1,"toc-affix",3,"nzOffsetTop"],["nzShowInkInFixed","",3,"nzClick","nzAffix"],["nzHref","#components-flex-demo-basic","nzTitle","Basic"],["nzHref","#components-flex-demo-align","nzTitle","Align"],["nzHref","#components-flex-demo-gap","nzTitle","Gap"],["nzHref","#components-flex-demo-wrap","nzTitle","Wrap"],["nzHref","#components-flex-demo-combination","nzTitle","Combination"],["nzHref","#api","nzTitle","API"],[1,"markdown"],[1,"subtitle"],[1,"widget"],["aria-label","Edit this page on Github","href","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/doc/index.en-US.md","target","_blank","rel","noopener noreferrer",1,"edit-button"],["nzType","edit"],["name","flex","description","A flex layout container for alignment.","language","en"],["id","when_to_use"],["onclick","window.location.hash = 'when_to_use'",1,"anchor"],["id","difference_with_space_component"],["onclick","window.location.hash = 'difference_with_space_component'",1,"anchor"],["nzType","appstore","nz-tooltip","","nzTooltipTitle","Expand All Code",1,"code-box-expand-trigger",3,"click"],["nz-row","",3,"nzGutter"],["nz-col","",3,"nzSpan"],["nzTitle","Basic","nzSelector","nz-demo-flex-basic","nzGenerateCommand","ng g ng-zorro-antd:flex-basic <name>","nzComponentName","NzDemoFlexBasicComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["demo",""],["intro",""],["nzTitle","Align","nzSelector","nz-demo-flex-align","nzGenerateCommand","ng g ng-zorro-antd:flex-align <name>","nzComponentName","NzDemoFlexAlignComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["nzTitle","Gap","nzSelector","nz-demo-flex-gap","nzGenerateCommand","ng g ng-zorro-antd:flex-gap <name>","nzComponentName","NzDemoFlexGapComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["nzTitle","Wrap","nzSelector","nz-demo-flex-wrap","nzGenerateCommand","ng g ng-zorro-antd:flex-wrap <name>","nzComponentName","NzDemoFlexWrapComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],["nzTitle","Combination","nzSelector","nz-demo-flex-combination","nzGenerateCommand","ng g ng-zorro-antd:flex-combination <name>","nzComponentName","NzDemoFlexCombinationComponent","nzIframeSource","null",3,"nzId","nzLink","nzIframe","nzIframeHeight","nzHref"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","nz-flex"],[1,"api-type-label","directive"],["onclick","window.location.hash = 'nz-flex'",1,"anchor"],["href","https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content","target","_blank","rel","noopener"],["href","https://developer.mozilla.org/en-US/docs/Web/CSS/align-items","target","_blank","rel","noopener"],["href","https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap","target","_blank","rel","noopener"],["href","https://developer.mozilla.org/en-US/docs/Web/CSS/flex","target","_blank","rel","noopener"]],template:function(i,o){i&1&&(e(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),N("nzClick",function(d){return o.goLink(d)}),p(3,"nz-link",2)(4,"nz-link",3)(5,"nz-link",4)(6,"nz-link",5)(7,"nz-link",6)(8,"nz-link",7),t()(),e(9,"section",8)(10,"h1"),n(11,"Flex"),p(12,"span",9)(13,"span",10),e(14,"a",11),p(15,"nz-icon",12),t()(),p(16,"component-meta",13),e(17,"section",8),c(),e(18,"h2",14)(19,"span"),n(20,"When To Use"),t(),e(21,"a",15),n(22,"#"),t()(),e(23,"ul")(24,"li"),n(25,"Good for setting spacing between elements."),t(),e(26,"li"),n(27,"Suitable for setting various horizontal and vertical alignments."),t()(),e(28,"h3",16)(29,"span"),n(30,"Difference with Space component"),t(),e(31,"a",17),n(32,"#"),t()(),e(33,"ul")(34,"li"),n(35,`Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for
2inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.`),t(),e(36,"li"),n(37,`Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of
3child elements in vertical or horizontal direction, and provides more flexibility and control.`),t()(),s(),t(),e(38,"h2")(39,"span"),n(40,"Examples"),t(),e(41,"nz-icon",18),N("click",function(){return o.expandAllCode()}),t()()(),e(42,"div",19)(43,"div",20)(44,"nz-code-box",21),p(45,"nz-demo-flex-basic",22),e(46,"div",23),c(),e(47,"p"),n(48,"The basic usage."),t(),s(),t()(),e(49,"nz-code-box",24),p(50,"nz-demo-flex-align",22),e(51,"div",23),c(),e(52,"p"),n(53,"Set align."),t(),s(),t()(),e(54,"nz-code-box",25),p(55,"nz-demo-flex-gap",22),e(56,"div",23),c(),e(57,"p"),n(58,"Set the "),e(59,"code"),n(60,"gap"),t(),n(61," between elements, which has three preset sizes: "),e(62,"code"),n(63,"small"),t(),n(64,", "),e(65,"code"),n(66,"middle"),t(),n(67,", "),e(68,"code"),n(69,"large"),t(),n(70,", You can also customize the gap size."),t(),s(),t()(),e(71,"nz-code-box",26),p(72,"nz-demo-flex-wrap",22),e(73,"div",23),c(),e(74,"p"),n(75,"Wrap line."),t(),s(),t()(),e(76,"nz-code-box",27),p(77,"nz-demo-flex-combination",22),e(78,"div",23),c(),e(79,"p"),n(80,"Nesting can achieve more complex layouts."),t(),s(),t()()()(),e(81,"section",28),c(),e(82,"h2",29)(83,"span"),n(84,"API"),t(),e(85,"a",30),n(86,"#"),t()(),e(87,"h3",31)(88,"span"),n(89,"[nz-flex]"),t(),e(90,"label",32),n(91,"directive"),t(),e(92,"a",33),n(93,"#"),t()(),e(94,"table")(95,"thead")(96,"tr")(97,"th"),n(98,"Property"),t(),e(99,"th"),n(100,"Description"),t(),e(101,"th"),n(102,"Type"),t(),e(103,"th"),n(104,"Default"),t()()(),e(105,"tbody")(106,"tr")(107,"td")(108,"code"),n(109,"[nzVertical]"),t()(),e(110,"td"),n(111,"Is direction of the flex vertical, use "),e(112,"code"),n(113,"flex-direction: column"),t()(),e(114,"td")(115,"code"),n(116,"boolean"),t()(),e(117,"td")(118,"code"),n(119,"false"),t()()(),e(120,"tr")(121,"td")(122,"code"),n(123,"[nzJustify]"),t()(),e(124,"td"),n(125,"Sets the alignment of elements in the direction of the main axis"),t(),e(126,"td"),n(127,"reference "),e(128,"a",34),n(129,"justify-content"),t()(),e(130,"td")(131,"code"),n(132,"'normal'"),t()()(),e(133,"tr")(134,"td")(135,"code"),n(136,"[nzAlign]"),t()(),e(137,"td"),n(138,"Sets the alignment of elements in the direction of the cross axis"),t(),e(139,"td"),n(140,"reference "),e(141,"a",35),n(142,"align-items"),t()(),e(143,"td")(144,"code"),n(145,"'normal'"),t()()(),e(146,"tr")(147,"td")(148,"code"),n(149,"[nzGap]"),t()(),e(150,"td"),n(151,"Sets the gap between items"),t(),e(152,"td")(153,"code"),n(154,"'small' | 'middle' | 'large' | number | string"),t()(),e(155,"td")(156,"code"),n(157,"0"),t()()(),e(158,"tr")(159,"td")(160,"code"),n(161,"[nzWrap]"),t()(),e(162,"td"),n(163,"Set whether the element is displayed in a single line or in multiple lines"),t(),e(164,"td"),n(165,"reference "),e(166,"a",36),n(167,"flex-wrap"),t()(),e(168,"td")(169,"code"),n(170,"'nowrap'"),t()()(),e(171,"tr")(172,"td")(173,"code"),n(174,"[nzFlex]"),t()(),e(175,"td"),n(176,"Flex CSS shorthand properties"),t(),e(177,"td"),n(178,"reference "),e(179,"a",37),n(180,"flex"),t()(),e(181,"td")(182,"code"),n(183,"'unset'"),t()()()()(),s(),t()()),i&2&&(l(),a("nzOffsetTop",16),l(),a("nzAffix",!1),l(40),a("nzGutter",8),l(),a("nzSpan",24),l(),a("nzId","components-flex-demo-basic")("nzLink","components-flex-demo-basic")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/basic.md"),l(5),a("nzId","components-flex-demo-align")("nzLink","components-flex-demo-align")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/align.md"),l(5),a("nzId","components-flex-demo-gap")("nzLink","components-flex-demo-gap")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/gap.md"),l(1

37),a("nzId","components-flex-demo-wrap")("nzLink","components-flex-demo-wrap")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/wrap.md"),l(5),a("nzId","components-flex-demo-combination")("nzLink","components-flex-demo-combination")("nzIframe",!1)("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/combination.md"))},dependencies:[X,b,U,Q,j,J,Z,V,R,P,I,M,T,G,W],encapsulation:2})};var we=[{path:"en",component:Y},{path:"zh",component:K}],Et=we;export{Et as default};