微信小程序超好用全局的flex布局

最新推荐文章于 2023-03-08 23:23:30 发布

icoo张某人

最新推荐文章于 2023-03-08 23:23:30 发布

阅读量287

点赞数 1

分类专栏：微信小程序文章标签： css 微信小程序 css3

本文链接：https://blog.csdn.net/zerzhang/article/details/126854474

版权

微信小程序专栏收录该内容

20 篇文章 1 订阅

订阅专栏

app.scss的引入

/**app.wxss**/
$primary-color:#3A89FD;
$bg-color:#f5f5f5;
$line-color:#E2E4E8;

$text-color-main : #292A36;
$text-color-minor : #5D5D5D;
$text-color-slur : #787878;




.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: $bg-color;
  box-sizing: border-box;
  overflow: hidden;
}


.flex-alian-start {
  align-items: flex-start;
}

.flex-alian-center {
  align-items: center !important;
}

.flex-center {
  justify-content: center;
  align-items: center;
}


.flex-alian-end {
  justify-content: flex-end;
}

.flex-match-parent {
  flex-grow: 1;
}

.flex-wrap-content {
  flex-grow: 0;
}

.scroll-y {
  overflow-y: scroll;
}

.scroll-x {
  overflow-x: scroll;
}


.flex-vertical {
  display: flex;
  flex-direction: column;

}

@mixin flex-horizontal {
  display: flex;
  flex-direction: row;
}

.flex-horizontal {
  @include flex-horizontal()
}



.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-evenly {
  justify-content: space-evenly;
}