asj-css/dist/layout.css

常用css样式封装

.flex{display:flex;flex-direction:row;align-items:center}.flex-inline{display:inline-flex;flex-direction:row}.flex-none{flex:none}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.flex-col-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.col-top{align-items:flex-start}.col-center{align-items:center}.col-bottom{align-items:flex-end}.col-stretch{align-items:stretch}.col-baseline{align-items:baseline}.row-left{justify-content:flex-start}.row-center{justify-content:center}.row-right{justify-content:flex-end}.row-between{justify-content:space-between}.row-around{justify-content:space-around}.gap-2{gap:2px}.gap-4{gap:4px}.gap-5{gap:5px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-15{gap:15px}.gap-16{gap:16px}.gap-18{gap:18px}.gap-20{gap:20px}.gap-22{gap:22px}.gap-24{gap:24px}.gap-25{gap:25px}.gap-26{gap:26px}.gap-28{gap:28px}.gap-30{gap:30px}.gap-32{gap:32px}.gap-34{gap:34px}.gap-35{gap:35px}.gap-36{gap:36px}.gap-38{gap:38px}.gap-40{gap:40px}.gap-42{gap:42px}.gap-44{gap:44px}.gap-45{gap:45px}.gap-46{gap:46px}.gap-48{gap:48px}.gap-50{gap:50px}.flex-0{flex:0}.grid-0{display:grid;grid-template-columns:repeat(0, 1fr)}.flex-1{flex:1}.grid-1{display:grid;grid-template-columns:repeat(1, 1fr)}.flex-2{flex:2}.grid-2{display:grid;grid-template-columns:repeat(2, 1fr)}.flex-3{flex:3}.grid-3{display:grid;grid-template-columns:repeat(3, 1fr)}.flex-4{flex:4}.grid-4{display:grid;grid-template-columns:repeat(4, 1fr)}.flex-5{flex:5}.grid-5{display:grid;grid-template-columns:repeat(5, 1fr)}.flex-6{flex:6}.grid-6{display:grid;grid-template-columns:repeat(6, 1fr)}.flex-7{flex:7}.grid-7{display:grid;grid-template-columns:repeat(7, 1fr)}.flex-8{flex:8}.grid-8{display:grid;grid-template-columns:repeat(8, 1fr)}.flex-9{flex:9}.grid-9{display:grid;grid-template-columns:repeat(9, 1fr)}.flex-10{flex:10}.grid-10{display:grid;grid-template-columns:repeat(10, 1fr)}.flex-11{flex:11}.grid-11{display:grid;grid-template-columns:repeat(11, 1fr)}.flex-12{flex:12}.grid-12{display:grid;grid-template-columns:repeat(12, 1fr)}@media(max-width: var(--breakpoint-xs)){.hide-xs{display:none !important}}@media(max-width: var(--breakpoint-sm)){.hide-sm{display:none !important}}@media(max-width: var(--breakpoint-md)){.hide-md{display:none !important}}@media(max-width: var(--breakpoint-lg)){.hide-lg{display:none !important}}@media(max-width: var(--breakpoint-xl)){.hide-xl{display:none !important}}.show-xs{display:none !important}@media(max-width: var(--breakpoint-xs)){.show-xs{display:block !important}}.show-sm{display:none !important}@media(max-width: var(--breakpoint-sm)){.show-sm{display:block !important}}.show-md{display:none !important}@media(max-width: var(--breakpoint-md)){.show-md{display:block !important}}.show-lg{display:none !important}@media(max-width: var(--breakpoint-lg)){.show-lg{display:block !important}}.show-xl{display:none !important}@media(max-width: var(--breakpoint-xl)){.show-xl{display:block !important}}