123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- //弹性布局相关样式
- .flex {
- &-row {
- /* #ifndef APP-NVUE */
- display: flex;
- box-sizing: border-box;
- /* #endif */
- flex-direction: row!important;
- }
- &-col {
- /* #ifndef APP-NVUE */
- display: flex;
- box-sizing: border-box;
- /* #endif */
- flex-direction: column!important;
- }
- &-column {
- /* #ifndef APP-NVUE */
- display: flex;
- box-sizing: border-box;
- /* #endif */
- flex-direction: column!important;
- }
- &-one {
- flex: 1;
- }
- &-two {
- flex: 3;
- }
- &-three {
- flex: 3;
- }
- &-four {
- flex: 4;
- }
- &-five {
- flex: 5;
- }
- &-six {
- flex: 6;
- }
- &-center {
- justify-content: center;
- align-items: center;
- }
- &-grow-0 {
- flex-grow: 0 !important;
- }
- &-grow-1 {
- flex-grow: 1 !important;
- }
- &-shrink-0 {
- flex-shrink: 0 !important;
- }
- &-shrink-1 {
- flex-shrink: 1 !important;
- }
- &-wrap {
- flex-wrap: wrap !important;
- &-reverse {
- flex-wrap: wrap-reverse !important;
- }
- }
- &-nowrap {
- flex-wrap: nowrap !important;
- }
- }
- .justify {
- &-start {
- justify-content: flex-start;
- }
- &-center {
- justify-content: center;
- }
- &-end {
- justify-content: flex-end;
- }
- &-between {
- justify-content: space-between;
- }
- &-around {
- justify-content: space-around;
- }
- &-stretch {
- justify-content: stretch;
- }
- }
- .align {
- &-start {
- align-items: flex-start;
- }
- &-center {
- align-items: center;
- }
- &-end {
- align-items: flex-end;
- }
- &-baseline {
- align-items: baseline;
- }
- &-stretch {
- align-items: stretch;
- }
- }
- .full {
- &-width {
- width: 100%;
- }
- &-height {
- flex: 1;
- height: 100%;
- }
- &-page-width {
- width: 100vw;
- }
- &-page-height {
- flex: 1;
- height: 100vh;
- }
- &-abs {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- }
- .gap-0 {
- &-row-0 {
- row-gap: 0;
- }
- &-column-0 {
- column-gap: 0;
- }
- &-0 {
- gap: 0;
- }
- }
|