小程序–flex布局常用css 设置

最新推荐文章于 2023-07-01 19:59:15 发布

吹泡泡的星星koky

最新推荐文章于 2023-07-01 19:59:15 发布

阅读量1.4k

点赞数

分类专栏：小程序微信小程序文章标签： flex css 布局小程序

本文链接：https://blog.youkuaiyun.com/u012411480/article/details/78919863

版权

微信小程序同时被 2 个专栏收录

11 篇文章

订阅专栏

小程序

7 篇文章

订阅专栏

本文介绍了Flex布局的基本属性，如flex-direction和justify-content，并展示了如何使用这些属性来实现水平和垂直居中对齐。此外，还讲解了背景渐变、重叠布局、小程序Button组件的设置方法以及CSS其他常用样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex-direction属性决定主轴的方向
- flex-direction: row; 主轴为水平方向，起点在左端。
- flex-direction: row-reverse;主轴为水平方向，起点在右端。
- flex-direction: column;主轴为垂直方向，起点在上沿。
- flex-direction: column-reverse;主轴为垂直方向，起点在下沿。
justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
两种居中对齐：
align-items: center; //水平
justify-content:center; //垂直.
背景色从左到右渐变

background-image: linear-gradient(124deg, 
        #5db5f3 0%, 
        #5c8cef 100%), 
    linear-gradient(
        #ffffff, 
        #ffffff);
    background-blend-mode: normal, 
        normal;

重叠布局：

父组件
{
  z-index: 10;
  position:absolute;
  top:0;
}
子组件：
{
position:fixed;
}

小程序button组件
- 设置透明，无边框,分享按钮

wxml:
        <button  open-type="share" class = "sharePage" plain ="true" style="border:none;"   >分享</button>

    wxss:
    .sharePage{
          position:fixed;
          display:block;
          margin-left:80%;
          width: 100rpx;
          height: 100rpx;
          background-color:transparent;
    }

上边框线
margin-top:20rpx;
border-top:10rpx solid #f2f1f8;
居中布局

text-align:center;
flex-direction:column;
align-items:center;
display:flex;

背景图片平铺不重复设置

background-image:url();
background-repeat:no-repeat;
background-size:100% 100%;