chunk-BQRZFQIL.js

import{a as N,b as Se}from"./chunk-UUQFVPTG.js";import{a as he,b as Ee}from"./chunk-S677LRWF.js";import{a as ze,b as ge,c as xe}from"./chunk-GMAX22QU.js";import"./chunk-OT5GAY2Z.js";import{a as h,b as D,d as fe}from"./chunk-E4FB6IMX.js";import{a as v}from"./chunk-ENUDN6ZE.js";import{f as W,g as H,i as y,j as ce}from"./chunk-MVBTB2OL.js";import"./chunk-QH77Q77Q.js";import{B as ue,Gb as G,Hc as R,Ib as O,Jb as L,Rb as P,Ua as C,Ya as F}from"./chunk-SBXTKZGS.js";import{Ab as ee,Ba as u,Ca as c,Da as Y,Db as te,Dd as pe,Ea as $,Fb as m,Gb as ne,Hb as ie,Ob as oe,Qb as ae,Rb as le,Sb as re,Tb as e,Ub as n,Vb as p,Yc as se,Zb as me,ac as w,cc as X,ga as k,jc as T,kb as r,kc as I,lc as _,nc as t,pc as de,qa as z,ra as M,sa as K,sc as g,tc as x,uc as S}from"./chunk-WVUROUXZ.js";import"./chunk-RKLIRILV.js";var E=(()=>{let o=class o{constructor(){this.nzVertical=!1,this.nzJustify="normal",this.nzAlign="normal",this.nzGap=0,this.nzWrap="nowrap",this.nzFlex="unset"}get gap(){switch(this.nzGap){case"small":return"8px";case"middle":return"16px";case"large":return"24px";default:return typeof this.nzGap=="number"?`${this.nzGap}px`:this.nzGap}}};o.\u0275fac=function(a){return new(a||o)},o.\u0275dir=K({type:o,selectors:[["","nz-flex",""],["nz-flex"]],hostAttrs:[1,"ant-flex"],hostVars:60,hostBindings:function(a,i){a&2&&(ne("gap",i.gap)("flex",i.nzFlex),ie("ant-flex-vertical",i.nzVertical)("ant-flex-justify-flex-start",i.nzJustify==="flex-start")("ant-flex-justify-center",i.nzJustify==="center")("ant-flex-justify-flex-end",i.nzJustify==="flex-end")("ant-flex-justify-space-between",i.nzJustify==="space-between")("ant-flex-justify-space-around",i.nzJustify==="space-around")("ant-flex-justify-space-evenly",i.nzJustify==="space-evenly")("ant-flex-justify-start",i.nzJustify==="start")("ant-flex-justify-end",i.nzJustify==="end")("ant-flex-justify-right",i.nzJustify==="right")("ant-flex-justify-left",i.nzJustify==="left")("ant-flex-justify-stretch",i.nzJustify==="stretch")("ant-flex-justify-normal",i.nzJustify==="normal")("ant-flex-align-flex-start",i.nzAlign==="flex-start")("ant-flex-align-center",i.nzAlign==="center")("ant-flex-align-flex-end",i.nzAlign==="flex-end")("ant-flex-align-space-between",i.nzAlign==="space-between")("ant-flex-align-space-around",i.nzAlign==="space-around")("ant-flex-align-space-evenly",i.nzAlign==="space-evenly")("ant-flex-align-start",i.nzAlign==="start")("ant-flex-align-end",i.nzAlign==="end")("ant-flex-align-right",i.nzAlign==="right")("ant-flex-align-left",i.nzAlign==="left")("ant-flex-align-stretch",i.nzAlign==="stretch")("ant-flex-align-normal",i.nzAlign==="normal")("ant-flex-wrap-wrap",i.nzWrap==="wrap")("ant-flex-wrap-wrap-reverse",i.nzWrap==="wrap-reverse")("ant-flex-wrap-nowrap",i.nzWrap==="nowrap"))},inputs:{nzVertical:[2,"nzVertical","nzVertical",se],nzJustify:"nzJustify",nzAlign:"nzAlign",nzGap:"nzGap",nzWrap:"nzWrap",nzFlex:"nzFlex"},exportAs:["nzFlex"],standalone:!0,features:[ee]});let l=o;return l})(),Ce=(()=>{let o=class o{};o.\u0275fac=function(a){return new(a||o)},o.\u0275mod=M({type:o}),o.\u0275inj=k({});let l=o;return l})();var Fe=[Ce,Se,fe,Ee,xe,pe];var j=(()=>{let o=class o{constructor(){this.justifySegment=["flex-start","center","flex-end","space-between","space-around","space-evenly"],this.alignSegment=["flex-start","center","flex-end"],this.selectedJustification=0,this.selectedLAlignment=0}};o.\u0275fac=function(a){return new(a||o)},o.\u0275cmp=z({type:o,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(a,i){a&1&&(e(0,"div",0)(1,"span"),t(2,"Select justify:"),n(),e(3,"nz-segmented",1),S("ngModelChange",function(s){return x(i.selectedJustification,s)||(i.selectedJustification=s),s}),n()(),e(4,"div",0)(5,"span"),t(6,"Select align:"),n(),e(7,"nz-segmented",1),S("ngModelChange",function(s){return x(i.selectedLAlignment,s)||(i.selectedLAlignment=s),s}),n()(),e(8,"div",2)(9,"button",3),t(10,"Primary"),n(),e(11,"button",3),t(12,"Primary"),n(),e(13,"button",3),t(14,"Primary"),n(),e(15,"button",3),t(16,"Primary"),n()()),a&2&&(r(3),m("nzOptions",i.justifySegment),g("ngModel",i.selectedJustification),r(4),m("nzOptions",i.alignSegment),g("ngModel",i.selectedLAlignment),r(),m("nzJustify",i.justifySegment[i.selectedJustification])("nzAlign",i.alignSegment[i.selectedLAlignment]))},dependencies:[C,F,E,N,D,h,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)}"]});let l=o;return l})();var J=(()=>{let o=class o{constructor(){this.isVertical=!1}};o.\u0275fac=function(a){return new(a||o)},o.\u0275cmp=z({type:o,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(a,i){a&1&&(e(0,"nz-radio-group",0),S("ngModelChange",function(s){return x(i.isVertical,s)||(i.isVertical=s),s}),e(1,"label",1),t(2,"horizontal"),n(),e(3,"label",1),t(4,"vertical"),n()(),e(5,"div",2),p(6,"div",3)(7,"div",4)(8,"div",3)(9,"div",4),n()),a&2&&(g("ngModel",i.isVertical),r(),m("nzValue",!1),r(2),m("nzValue",!0),r(2),m("nzVertical",i.isVertical))},dependencies:[C,F,E,ge,ze],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)}"]});let l=o;return l})();var Z=(()=>{let o=class o{};o.\u0275fac=function(a){return new(a||o)},o.\u0275cmp=z({type:o,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(a,i){a&1&&(e(0,"div",0),p(1,"img",1),e(2,"div",2)(3,"h2"),t(4," Ant Design of Angular "),n(),e(5,"h3"),t(6," An enterprise-class Angular UI component library based on Ant Design, all components are open source and free to use under MIT license. "),n()()()),a&2&&(m("nzGap",80),r(2),m("nzVertical",!0)("nzGap","large"))},dependencies:[E],styles:[".combination-wrapper[_ngcontent-%COMP%]{inline-size:40rem;padding:2rem;border:1px solid #f0f0f0;border-radius:2px}"]});let l=o;return l})();function Te(l,o){if(l&1){let B=me();e(0,"nz-slider",8),S("ngModelChange",function(a){Y(B);let i=X();return x(i.customGapValue,a)||(i.customGapValue=a),$(a)}),n()}if(l&2){let B=X();m("nzMin",0)("nzMax",100),g("ngModel",B.customGapValue)}}var Q=(()=>{let o=class o{constructor(){this.gapSegment=["small","middle","large","custom"],this.selectedGap=0,this.customGapValue=0}};o.\u0275fac=function(a){return new(a||o)},o.\u0275cmp=z({type:o,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(a,i){a&1&&(e(0,"div",0)(1,"span"),t(2,"Select gap:"),n(),e(3,"nz-segmented",1),S("ngModelChange",function(s){return x(i.selectedGap,s)||(i.selectedGap=s),s}),n()(),te(4,Te,1,3,"nz-slider",2),e(5,"div",3)(6,"button",4),t(7,"Primary"),n(),e(8,"button",5),t(9,"Dashed"),n(),e(10,"button",6),t(11,"Default"),n(),e(12,"button",7),t(13,"Link"),n()()),a&2&&(r(3),m("nzOptions",i.gapSegment),g("ngModel",i.selectedGap),r(),oe(i.gapSegment[i.selectedGap]==="custom"?4:-1),r(),m("nzGap",i.selectedGap===0?"small":i.selectedGap===1?"middle":i.selectedGap===2?"large":i.customGapValue))},dependencies:[C,F,E,N,D,h,v,he],styles:[".segment-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center;gap:1rem;margin-block-end:1rem}"]});let l=o;return l})();function Ie(l,o){if(l&1&&(e(0,"button",3),t(1),n()),l&2){let B=o.$implicit;r(),de("Button ",B,"")}}var U=(()=>{let o=class o{constructor(){this.wrapSegment=["wrap","wrap-reverse","nowrap"],this.selectedWrap=0,this.array=Array.from({length:20},(d,a)=>a+1)}};o.\u0275fac=function(a){return new(a||o)},o.\u0275cmp=z({type:o,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(a,i){a&1&&(e(0,"div",0)(1,"span"),t(2,"Select wrap:"),n(),e(3,"nz-segmented",1),S("ngModelChange",function(s){return x(i.selectedWrap,s)||(i.selectedWrap=s),s}),n()(),e(4,"div",2),le(5,Ie,2,1,"button",3,ae),n()),a&2&&(r(3),m("nzOptions",i.wrapSegment),g("ngModel",i.selectedWrap),r(),m("nzGap","middle")("nzWrap",i.wrapSegment[i.selectedWrap]),r(),re(i.array))},dependencies:[C,F,E,N,D,h,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}"]});let l=o;return l})();var ke=(()=>{let o=class o{constructor(){this.expanded=!1}goLink(d){window&&(window.location.hash=d)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(d=>d.expandCode(this.expanded))}};o.\u0275fac=function(a){return new(a||o)},o.\u0275cmp=z({type:o,selectors:[["nz-demo-flex"]],viewQuery:function(a,i){if(a&1&&T(y,5),a&2){let f;I(f=_())&&(i.codeBoxes=f)}},decls:216,vars:24,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"],["nz-icon","","nzType","edit"],["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"],["id","\u5F15\u5165\u6A21\u5757"],["onclick","window.location.hash = '\u5F15\u5165\u6A21\u5757'",1,"anchor"],[1,"language-ts"],[1,"token","keyword"],[1,"token","punctuation"],[1,"token","string"],["nz-icon","","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","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","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","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","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","nzIframeHeight","nzHref"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","[nz-flex]:standalone"],[1,"api-type-label","directive"],[1,"api-type-label","standalone"],["onclick","window.location.hash = '[nz-flex]:standalone'",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(a,i){a&1&&(e(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),w("nzClick",function(s){return i.goLink(s)}),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),n()(),e(9,"section",8)(10,"h1"),t(11,"Flex"),e(12,"span",9),t(13,"\u5F39\u6027\u5E03\u5C40"),n(),p(14,"span",10),e(15,"a",11),p(16,"span",12),n()(),e(17,"section",8),c(),e(18,"p"),t(19,"\u5F39\u6027\u5E03\u5C40"),n(),e(20,"h2",13)(21,"span"),t(22,"\u4F55\u65F6\u4F7F\u7528"),n(),e(23,"a",14),t(24,"#"),n()(),e(25,"ul")(26,"li"),t(27,"\u9002\u5408\u8BBE\u7F6E\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\u3002"),n(),e(28,"li"),t(29,"\u9002\u5408\u8BBE\u7F6E\u5404\u79CD\u6C34\u5E73\u3001\u5782\u76F4\u5BF9\u9F50\u65B9\u5F0F\u3002"),n()(),e(30,"h3",15)(31,"span"),t(32,"\u4E0E Space \u7EC4\u4EF6\u7684\u533A\u522B"),n(),e(33,"a",16),t(34,"#"),n()(),e(35,"ul")(36,"li"),t(37,"Space \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"),n(),e(38,"li"),t(39,"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"),n()(),e(40,"h3",17)(41,"span"),t(42,"\u5F15\u5165\u6A21\u5757"),n(),e(43,"a",18),t(44,"#"),n()(),e(45,"pre",19)(46,"code")(47,"span",20),t(48,"import"),n(),t(49," "),e(50,"span",21),t(51,"{"),n(),t(52," NzFlexModule "),e(53,"span",21),t(54,"}"),n(),t(55," "),e(56,"span",20),t(57,"from"),n(),t(58," "),e(59,"span",22),t(60,"'ng-zorro-antd/flex'"),n(),e(61,"span",21),t(62,";"),n()()(),u(),n(),e(63,"h2")(64,"span"),t(65,"\u4EE3\u7801\u6F14\u793A"),n(),e(66,"span",23),w("click",function(){return i.expandAllCode()}),n()()(),e(67,"div",24)(68,"div",25)(69,"nz-code-box",26),p(70,"nz-demo-flex-basic",27),e(71,"div",28),c(),e(72,"p"),t(73,"\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002"),n(),u(),n()(),e(74,"nz-code-box",29),p(75,"nz-demo-flex-align",27),e(76,"div",28),c(),e(77,"p"),t(78,"\u8BBE\u7F6E\u5BF9\u9F50\u65B9\u5F0F\u3002"),n(),u(),n()(),e(79,"nz-code-box",30),p(80,"nz-demo-flex-gap",27),e(81,"div",28),c(),e(82,"p"),t(83,"\u4F7F\u7528 "),e(84,"code"),t(85,"gap"),n(),t(86," \u8BBE\u7F6E\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9884\u8BBE\u4E86 "),e(87,"code"),t(88,"small"),n(),t(89,"\u3001"),e(90,"code"),t(91,"middle"),n(),t(92,"\u3001"),e(93,"code"),t(94,"large"),n(),t(95," \u4E09\u79CD\u5C3A\u5BF8\uFF0C\u4E5F\u53EF\u4EE5\u81EA\u5B9A\u4E49\u95F4\u8DDD\u3002"),n(),u(),n()(),e(96,"nz-code-box",31),p(97,"nz-demo-flex-wrap",27),e(98,"div",28),c(),e(99,"p"),t(100,"\u81EA\u52A8\u6362\u884C\u3002"),n(),u(),n()(),e(101,"nz-code-box",32),p(102,"nz-demo-flex-combination",27),e(103,"div",28),c(),e(104,"p"),t(105,"\u5D4C\u5957\u4F7F\u7528\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u66F4\u590D\u6742\u7684\u5E03\u5C40\u3002"),n(),u(),n()()()(),e(106,"section",33),c(),e(107,"h2",34)(108,"span"),t(109,"API"),n(),e(110,"a",35),t(111,"#"),n()(),e(112,"h3",36)(113,"span"),t(114,"[nz-flex]"),n(),e(115,"label",37),t(116,"directive"),n(),e(117,"label",38),t(118,"standalone"),n(),e(119,"a",39),t(120,"#"),n()(),e(121,"table")(122,"thead")(123,"tr")(124,"th"),t(125,"\u53C2\u6570"),n(),e(126,"th"),t(127,"\u8BF4\u660E"),n(),e(128,"th"),t(129,"\u7C7B\u578B"),n(),e(130,"th"),t(131,"\u9ED8\u8BA4\u503C"),n()()(),e(132,"tbody")(133,"tr")(134,"td")(135,"code"),t(136,"[nzVertical]"),n()(),e(137,"td"),t(138,"\u4F7F\u7528 "),e(139,"code"),t(140,"flex-direction: column"),n(),t(141,"\u63CF\u8FF0flex\u7684\u5782\u76F4\u65B9\u5411"),n(),e(142,"td")(143,"code"),t(144,"boolean"),n()(),e(145,"td")(146,"code"),t(147,"false"),n()()(),e(148,"tr")(149,"td")(150,"code"),t(151,"[nzJustify]"),n()(),e(152,"td"),t(153,"\u8BBE\u7F6E\u5143\u7D20\u5728\u4E3B\u8F74\u65B9\u5411\u4E0A\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53C2\u7167 "),e(154,"a",40),t(155,"justify-content"),n()(),e(156,"td")(157,"code"),t(158,"NzJustify"),n()(),e(159,"td")(160,"code"),t(161,"'normal'"),n()()(),e(162,"tr")(163,"td")(164,"code"),t(165,"[nzAlign]"),n()(),e(166,"td"),t(167,"\u8BBE\u7F6E\u5143\u7D20\u5728\u4EA4\u53C9\u8F74\u65B9\u5411\u4E0A\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53C2\u7167 "),e(168,"a",41),t(169,"align-items"),n()(),e(170,"td")(171,"code"),t(172,"NzAlign"),n()(),e(173,"td")(174,"code"),t(175,"'normal'"),n()()(),e(176,"tr")(177,"td")(178,"code"),t(179,"[nzGap]"),n()(),e(180,"td"),t(181,"\u8BBE\u7F6E\u9879\u76EE\u7684\u95F4\u9699"),n(),e(182,"td")(183,"code"),t(184,"'small' | 'middle' | 'large' | number | string"),n()(),e(185,"td")(186,"code"),t(187,"0"),n()()(),e(188,"tr")(189,"td")(190,"code"),t(191,"[nzWrap]"),n()(),e(192,"td"),t(193,"\u6307\u5B9A flex \u5143\u7D20\u5355\u884C\u663E\u793A\u8FD8\u662F\u591A\u884C\u663E\u793A\uFF0C\u53C2\u7167 "),e(194,"a",42),t(195,"flex-wrap"),n()(),e(196,"td")(197,"code"),t(198,"NzWrap"),n()(),e(199,"td")(200,"code"),t(201,"'nowrap'"),n()()(),e(202,"tr")(203,"td")(204,"code"),t(205,"[nzFlex]"),n()(),e(206,"td"),t(207,"flex css\u7B80\u5199\u5C5E\u6027\uFF0C\u53C2\u7167 "),e(208,"a",43),t(209,"flex"),n()(),e(210,"td")(211,"code"),t(212,"NzFlex"),n()(),e(213,"td")(214,"code"),t(215,"'unset'"),n()()()()(),u(),n()()),a&2&&(r(),m("nzOffsetTop",16),r(),m("nzAffix",!1),r(65),m("nzGutter",8),r(),m("nzSpan",24),r(),m("nzId","components-flex-demo-basic")("nzLink","components-flex-demo-basic")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/basic.md"),r(5),m("nzId","components-flex-demo-align")("nzLink","components-flex-demo-align")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/align.md"),r(5),m("nzId","components-flex-demo-gap")("nzLink","components-flex-demo-gap")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/gap.md"),r(17),m("nzId","components-flex-demo-wrap")("nzLink","components-flex-demo-wrap")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/wrap.md"),r(5),m("nzId","components-flex-demo-combination")("nzLink","components-flex-demo-combination")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/combination.md"))},dependencies:[y,W,H,G,L,O,R,P,h,j,J,Z,Q,U],encapsulation:2});let l=o;return l})();var Me=(()=>{let o=class o{constructor(){this.expanded=!1}goLink(d){window&&(window.location.hash=d)}expandAllCode(){this.expanded=!this.expanded,this.codeBoxes.forEach(d=>d.expandCode(this.expanded))}};o.\u0275fac=function(a){return new(a||o)},o.\u0275cmp=z({type:o,selectors:[["nz-demo-flex"]],viewQuery:function(a,i){if(a&1&&T(y,5),a&2){let f;I(f=_())&&(i.codeBoxes=f)}},decls:213,vars:24,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"],["nz-icon","","nzType","edit"],["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"],["id","import-module"],["onclick","window.location.hash = 'import-module'",1,"anchor"],[1,"language-ts"],[1,"token","keyword"],[1,"token","punctuation"],[1,"token","string"],["nz-icon","","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","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","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","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","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","nzIframeHeight","nzHref"],[1,"markdown","api-container"],["id","api"],["onclick","window.location.hash = 'api'",1,"anchor"],["id","[nz-flex]:standalone"],[1,"api-type-label","directive"],[1,"api-type-label","standalone"],["onclick","window.location.hash = '[nz-flex]:standalone'",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(a,i){a&1&&(e(0,"article")(1,"nz-affix",0)(2,"nz-anchor",1),w("nzClick",function(s){return i.goLink(s)}),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),n()(),e(9,"section",8)(10,"h1"),t(11,"Flex"),p(12,"span",9)(13,"span",10),e(14,"a",11),p(15,"span",12),n()(),e(16,"section",8),c(),e(17,"p"),t(18,"Wrapper for "),e(19,"code"),t(20,"display: flex"),n(),t(21,"."),n(),e(22,"h2",13)(23,"span"),t(24,"When To Use"),n(),e(25,"a",14),t(26,"#"),n()(),e(27,"ul")(28,"li"),t(29,"Good for setting spacing between elements."),n(),e(30,"li"),t(31,"Suitable for setting various horizontal and vertical alignments."),n()(),e(32,"h3",15)(33,"span"),t(34,"Difference with Space component"),n(),e(35,"a",16),t(36,"#"),n()(),e(37,"ul")(38,"li"),t(39,`Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for
inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.`),n(),e(40,"li"),t(41,`Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of
child elements in vertical or horizontal direction, and provides more flexibility and control.`),n()(),e(42,"h3",17)(43,"span"),t(44,"Import Module"),n(),e(45,"a",18),t(46,"#"),n()(),e(47,"pre",19)(48,"code")(49,"span",20),t(50,"import"),n(),t(51," "),e(52,"span",21),t(53,"{"),n(),t(54," NzFlexModule "),e(55,"span",21),t(56,"}"),n(),t(57," "),e(58,"span",20),t(59,"from"),n(),t(60," "),e(61,"span",22),t(62,"'ng-zorro-antd/flex'"),n(),e(63,"span",21),t(64,";"),n()()(),u(),n(),e(65,"h2")(66,"span"),t(67,"Examples"),n(),e(68,"span",23),w("click",function(){return i.expandAllCode()}),n()()(),e(69,"div",24)(70,"div",25)(71,"nz-code-box",26),p(72,"nz-demo-flex-basic",27),e(73,"div",28),c(),e(74,"p"),t(75,"The basic usage."),n(),u(),n()(),e(76,"nz-code-box",29),p(77,"nz-demo-flex-align",27),e(78,"div",28),c(),e(79,"p"),t(80,"Set align."),n(),u(),n()(),e(81,"nz-code-box",30),p(82,"nz-demo-flex-gap",27),e(83,"div",28),c(),e(84,"p"),t(85,"Set the "),e(86,"code"),t(87,"gap"),n(),t(88," between elements, which has three preset sizes: "),e(89,"code"),t(90,"small"),n(),t(91,", "),e(92,"code"),t(93,"middle"),n(),t(94,", "),e(95,"code"),t(96,"large"),n(),t(97,", You can also customize the gap size."),n(),u(),n()(),e(98,"nz-code-box",31),p(99,"nz-demo-flex-wrap",27),e(100,"div",28),c(),e(101,"p"),t(102,"Wrap line."),n(),u(),n()(),e(103,"nz-code-box",32),p(104,"nz-demo-flex-combination",27),e(105,"div",28),c(),e(106,"p"),t(107,"Nesting can achieve more complex layouts."),n(),u(),n()()()(),e(108,"section",33),c(),e(109,"h2",34)(110,"span"),t(111,"API"),n(),e(112,"a",35),t(113,"#"),n()(),e(114,"h3",36)(115,"span"),t(116,"[nz-flex]"),n(),e(117,"label",37),t(118,"directive"),n(),e(119,"label",38),t(120,"standalone"),n(),e(121,"a",39),t(122,"#"),n()(),e(123,"table")(124,"thead")(125,"tr")(126,"th"),t(127,"Property"),n(),e(128,"th"),t(129,"Description"),n(),e(130,"th"),t(131,"Type"),n(),e(132,"th"),t(133,"Default"),n()()(),e(134,"tbody")(135,"tr")(136,"td")(137,"code"),t(138,"[nzVertical]"),n()(),e(139,"td"),t(140,"Is direction of the flex vertical, use "),e(141,"code"),t(142,"flex-direction: column"),n()(),e(143,"td")(144,"code"),t(145,"boolean"),n()(),e(146,"td")(147,"code"),t(148,"false"),n()()(),e(149,"tr")(150,"td")(151,"code"),t(152,"[nzJustify]"),n()(),e(153,"td"),t(154,"Sets the alignment of elements in the direction of the main axis"),n(),e(155,"td"),t(156,"reference "),e(157,"a",40),t(158,"justify-content"),n()(),e(159,"td")(160,"code"),t(161,"'normal'"),n()()(),e(162,"tr")(163,"td")(164,"code"),t(165,"[nzAlign]"),n()(),e(166,"td"),t(167,"Sets the alignment of elements in the direction of the cross axis"),n(),e(168,"td"),t(169,"reference "),e(170,"a",41),t(171,"align-items"),n()(),e(172,"td")(173,"code"),t(174,"'normal'"),n()()(),e(175,"tr")(176,"td")(177,"code"),t(178,"[nzGap]"),n()(),e(179,"td"),t(180,"Sets the gap between items"),n(),e(181,"td")(182,"code"),t(183,"'small' | 'middle' | 'large' | number | string"),n()(),e(184,"td")(185,"code"),t(186,"0"),n()()(),e(187,"tr")(188,"td")(189,"code"),t(190,"[nzWrap]"),n()(),e(191,"td"),t(192,"Set whether the element is displayed in a single line or in multiple lines"),n(),e(193,"td"),t(194,"reference "),e(195,"a",42),t(196,"flex-wrap"),n()(),e(197,"td")(198,"code"),t(199,"'nowrap'"),n()()(),e(200,"tr")(201,"td")(202,"code"),t(203,"[nzFlex]"),n()(),e(204,"td"),t(205,"Flex CSS shorthand properties"),n(),e(206,"td"),t(207,"reference "),e(208,"a",43),t(209,"flex"),n()(),e(210,"td")(211,"code"),t(212,"'unset'"),n()()()()(),u(),n()()),a&2&&(r(),m("nzOffsetTop",16),r(),m("nzAffix",!1),r(67),m("nzGutter",8),r(),m("nzSpan",24),r(),m("nzId","components-flex-demo-basic")("nzLink","components-flex-demo-basic")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/basic.md"),r(5),m("nzId","components-flex-demo-align")("nzLink","components-flex-demo-align")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/align.md"),r(5),m("nzId","components-flex-demo-gap")("nzLink","components-flex-demo-gap")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/gap.md"),r(17),m("nzId","components-flex-demo-wrap")("nzLink","components-flex-demo-wrap")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/wrap.md"),r(5),m("nzId","components-flex-demo-combination")("nzLink","components-flex-demo-combination")("nzIframeHeight",null)("nzHref","https://github.com/NG-ZORRO/ng-zorro-antd/edit/master/components/flex/demo/combination.md"))},dependencies:[y,W,H,G,L,O,R,P,h,j,J,Z,Q,U],encapsulation:2});let l=o;return l})();var ht=(()=>{let o=class o{};o.\u0275fac=function(a){return new(a||o)},o.\u0275mod=M({type:o}),o.\u0275inj=k({imports:[ce,Fe,ue.forChild([{path:"en",component:Me},{path:"zh",component:ke}])]});let l=o;return l})();export{ht as NzDemoFlexModule};