.flex-btn-group{display:flex;flex-wrap:wrap;gap:var(--demo-gap);margin:var(--demo-pad) 0 6px}.flex-prop-btn{background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);padding:6px 14px;font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);color:var(--secondary-text);cursor:pointer;transition:all .2s ease;line-height:1.4}.flex-prop-btn:hover{background:var(--demo-fill-light);border-color:var(--demo-fill-border-hover);color:var(--demo-accent)}.flex-prop-btn.active{background:var(--demo-fill-medium);border-color:var(--demo-accent);color:var(--demo-accent);font-weight:700}.my-flex{margin:16px 0 30px;direction:ltr}.flex-alignment{display:flex;width:100%;border:1px solid var(--demo-border);background:var(--demo-surface);border-radius:var(--demo-radius);padding:var(--demo-pad);gap:var(--demo-gap);box-sizing:border-box}.my-flex>*{color:var(--text-color);min-width:70px;min-height:50px;justify-content:center;flex-direction:column;text-align:center;display:flex;height:auto;font-weight:700;font-size:var(--demo-font-size-md);background:var(--demo-fill-light);border:1px solid var(--demo-fill-border);border-radius:var(--demo-radius);box-sizing:border-box}.my-flex>*:nth-child(1){background:var(--demo-color-1)}.my-flex>*:nth-child(2){background:var(--demo-color-2)}.my-flex>*:nth-child(3){background:var(--demo-color-3)}.my-flex>*:nth-child(4){background:var(--demo-color-4)}.my-flex>*:nth-child(5){background:var(--demo-color-5)}.my-flex>*:nth-child(6){background:var(--demo-color-6)}.my-flex>*:nth-child(7){background:var(--demo-color-1)}.my-flex>*:nth-child(8){background:var(--demo-color-2)}.my-flex>*:nth-child(9){background:var(--demo-color-3)}.my-flex>*:nth-child(10){background:var(--demo-color-4)}.my-flex>*:nth-child(11){background:var(--demo-color-5)}.my-flex>*:nth-child(12){background:var(--demo-color-6)}.flex-container-demo{display:flex;gap:var(--demo-gap);padding:var(--demo-pad-lg);border:2px dashed var(--demo-accent);border-radius:var(--demo-radius);background:var(--demo-surface);position:relative;margin:16px 0 30px;box-sizing:border-box}.flex-container-demo:before{content:"Flex Container";position:absolute;top:-12px;left:14px;background:var(--light-bg);padding:0 8px;font-family:var(--demo-font-mono);font-size:var(--demo-font-size-sm);color:var(--demo-accent);font-weight:700;letter-spacing:.5px}.flex-container-demo>div{background:var(--demo-fill-light);border:1px solid var(--demo-fill-border);border-radius:var(--demo-radius);padding:14px 24px;color:var(--demo-accent);font-weight:700;font-size:var(--demo-font-size-md);font-family:var(--demo-font-mono);box-sizing:border-box}.axis-demo-wrapper{position:relative;margin:16px 0 30px;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);padding:6px var(--demo-pad);display:flex;flex-direction:column;align-items:center;box-sizing:border-box}.axis-demo-body{display:flex;align-items:center;width:100%}.axis-demo{display:flex;gap:var(--demo-gap);padding:var(--demo-pad) 10px;align-items:center;flex:1;justify-content:center}.axis-demo>div{background:var(--demo-fill-light);border:1px solid var(--demo-fill-border);border-radius:var(--demo-radius);padding:14px 22px;color:var(--demo-accent);font-weight:700;font-size:var(--demo-font-size-md);font-family:var(--demo-font-mono);position:relative;z-index:1;box-sizing:border-box}.axis-tag{font-family:var(--demo-font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:center;line-height:1.3;padding:4px 0;flex-shrink:0}.axis-tag-ms,.axis-tag-me{color:var(--demo-accent);min-width:55px}.axis-tag-cs,.axis-tag-ce{color:var(--demo-color-5)}.axis-line{position:absolute;display:block}.axis-line-x{left:60px;right:60px;top:50%;height:2px;background:var(--demo-accent);opacity:.35;transform:translateY(-50%)}.axis-line-x:after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:6px solid var(--demo-accent);opacity:.7}.axis-line-x:before{content:"Main-Axis (X)";position:absolute;top:-18px;left:50%;transform:translate(-50%);font-family:var(--demo-font-mono);font-size:10px;font-weight:700;color:var(--demo-accent);opacity:.6;white-space:nowrap}.axis-line-y{top:6px;bottom:6px;left:50%;width:2px;background:var(--demo-color-5);opacity:.35;transform:translate(-50%)}.axis-line-y:after{content:"";position:absolute;bottom:-1px;left:-4px;border:5px solid transparent;border-top:6px solid var(--demo-color-5);opacity:.7}.axis-line-y:before{content:"Cross-Axis (Y)";position:absolute;left:8px;top:2px;font-family:var(--demo-font-mono);font-size:10px;font-weight:700;color:var(--demo-color-5);opacity:.6;white-space:nowrap}.axis-demo[dir=rtl]{direction:rtl}.axis-demo-wrapper:has(.axis-demo[dir=rtl]) .axis-line-x:after{right:auto;left:-1px;border-left:none;border-right:6px solid var(--demo-accent)}.axis-demo-wrapper:has(.axis-demo[dir=rtl]) .axis-tag-ms,.axis-demo-wrapper:has(.axis-demo[dir=rtl]) .axis-tag-me{direction:ltr}.axis-demo-wrapper:has(.axis-demo[dir=rtl]) .axis-demo-body{flex-direction:row-reverse}.flex-wrapper-a{height:auto;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-a>div{padding:10px 8px;font-size:var(--demo-font-size-md);min-height:auto;text-align:left;justify-content:flex-start;flex-direction:row}.flex-wrapper-b{padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-b>div{width:20%;font-size:var(--demo-font-size-sm);align-items:center;min-height:auto}.flex-wrapper-two{align-items:stretch;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-two>div{width:20%;font-size:var(--demo-font-size-sm)}.flex-wrapper-ten{height:300px;flex-wrap:wrap;align-content:stretch;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-ten>div{width:calc(100% / 3 - 6px)}.justifycontent{padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrap{min-height:120px;height:auto;align-items:initial;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrap>div{width:45%;min-height:44px}.flex-wrapper-six{align-items:flex-start;flex-direction:row;height:240px;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-six>div{min-width:50px;min-height:50px}.flex-wrapper-six>div:nth-child(1){align-self:stretch}.flex-wrapper-six>div:nth-child(3){align-self:center}.align-self{align-items:stretch;padding:var(--demo-pad);gap:var(--demo-gap)}.align-self>div{width:25%}.flex-wrapper-seven{height:150px;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-seven>div{padding:0 12px;min-width:70px;min-height:50px;font-size:var(--demo-font-size-md)}.flex-wrapper-seven>div:nth-child(1){align-self:flex-start}.flex-wrapper-seven>div:nth-child(2){align-self:center}.flex-wrapper-seven>div:nth-child(3){align-self:flex-end}.flex-wrapper-eight{flex-direction:column;height:210px;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-eight>div{padding:0 12px;min-width:70px;min-height:50px;font-size:var(--demo-font-size-md)}.flex-wrapper-eight>div:nth-child(1){align-self:flex-start}.flex-wrapper-eight>div:nth-child(2){align-self:center}.flex-wrapper-eight>div:nth-child(3){align-self:flex-end}.flexdirection{height:200px!important;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-grow{padding:var(--demo-pad);gap:var(--demo-gap)}.flex-grow>div:nth-child(2){flex-grow:1}.flex-grow>div:nth-child(3){flex-grow:2}.flex-shrink-demo{padding:var(--demo-pad);gap:var(--demo-gap)}.flex-shrink-demo>div:nth-child(1){flex-basis:300px;flex-shrink:1}.flex-shrink-demo>div:nth-child(2){flex-basis:300px;flex-shrink:3}.flex-shrink-demo>div:nth-child(3){flex-basis:300px;flex-shrink:1}.flex-basis{padding:var(--demo-pad);gap:var(--demo-gap)}.flex-basis>div{flex-basis:25%}.flex-basis-1{padding:var(--demo-pad);gap:var(--demo-gap)}.flex-basis-1>div:nth-child(1){flex-basis:55%}.flex-basis-1>div:nth-child(2){flex-basis:15%}.flex-basis-1>div:nth-child(3){flex-basis:15%}.order-demo{padding:var(--demo-pad);gap:var(--demo-gap);flex-wrap:wrap}.order-demo>div:nth-child(3){order:-1}.flex-wrapper-one{display:flex;align-items:center;justify-content:center;padding:var(--demo-pad)}.flex-wrapper-one>div{width:60px}.flex-wrapper-g{align-items:flex-start;padding:var(--demo-pad);gap:var(--demo-gap)}.flex-wrapper-g>div:nth-child(4){margin-right:auto}.container1,.container2,.container3,.container4,.container5,.container6,.container7,.container8,.container9,.container10{padding:var(--demo-pad-lg);border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface);margin:16px 0 30px;box-sizing:border-box;direction:ltr}.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8,.item9,.item10,.item11,.item12,.item{background:var(--demo-fill-light);border:1px solid var(--demo-fill-border);border-radius:var(--demo-radius);box-sizing:border-box}.container1{display:flex}.item1{flex-grow:1;height:100px}.item1+.item1{margin-left:2%}.container2{display:flex;gap:15px}.item2{height:100px;width:60px}.item-center2{flex-grow:1}.container3{display:flex;flex-wrap:wrap;justify-content:space-between}.item3{width:48%;height:100px;margin-bottom:2%}.item3:nth-child(3n){width:100%}.container4{display:flex;flex-wrap:wrap;justify-content:space-between}.item4{flex:0 32%;height:100px;margin-bottom:2%}.container5{display:flex;flex-wrap:wrap;justify-content:space-between}.item5{width:32%;padding-bottom:32%;margin-bottom:2%;position:relative}.container6{display:flex;flex-wrap:wrap;justify-content:space-between}.item6{width:32%;padding-bottom:18%;margin-bottom:2%}.container7{display:flex;height:300px;justify-content:space-between;align-items:flex-end}.container7 .item{width:14%}.container7 .item-1{height:40%;background:var(--demo-color-1)}.container7 .item-2{height:50%;background:var(--demo-color-2)}.container7 .item-3{height:60%;background:var(--demo-color-3)}.container7 .item-4{height:20%;background:var(--demo-color-4)}.container7 .item-5{height:30%;background:var(--demo-color-5)}.container8{display:flex;height:300px;justify-content:space-between;flex-direction:column}.container8 .item{height:14%}.container8 .item-1{width:40%;background:var(--demo-color-1)}.container8 .item-2{width:50%;background:var(--demo-color-2)}.container8 .item-3{width:60%;background:var(--demo-color-3)}.container8 .item-4{width:20%;background:var(--demo-color-4)}.container8 .item-5{width:30%;background:var(--demo-color-5)}.container9{display:flex;height:300px;flex-direction:column;align-items:center;justify-content:center}.container9 .item{height:40px;margin-bottom:10px;width:200px}.container10{display:flex;flex-flow:column wrap;align-content:space-between;height:580px;padding:10px}.container10 .item{width:32%;margin-bottom:8px}.container10 .item:nth-child(1){height:170px;background:var(--demo-color-1)}.container10 .item:nth-child(2){height:120px;background:var(--demo-color-2)}.container10 .item:nth-child(3){height:140px;background:var(--demo-color-3)}.container10 .item:nth-child(4){height:80px;background:var(--demo-color-4)}.container10 .item:nth-child(5){height:100px;background:var(--demo-color-5)}.container10 .item:nth-child(6){height:130px;background:var(--demo-color-6)}.container10 .item:nth-child(7){height:90px;background:var(--demo-color-1)}.container10 .item:nth-child(8){height:150px;background:var(--demo-color-2)}.container10 .item:nth-child(9){height:110px;background:var(--demo-color-3)}.container10 .item:nth-child(10){height:80px;background:var(--demo-color-4)}.container10 .item:nth-child(3n+1){order:1}.container10 .item:nth-child(3n+2){order:2}.container10 .item:nth-child(3n){order:3}.container10:before,.container10:after{content:"";flex-basis:100%;width:0;order:2}@media(max-width:768px){.flex-wrapper-six>div{min-width:40px;min-height:40px}.flex-wrapper-seven>div,.flex-wrapper-eight>div{min-width:50px}.flex-wrapper-g>div{min-width:40px;min-height:40px}.flex-prop-btn{padding:5px 10px;font-size:var(--demo-font-size-xs)}}