4.flex布局基本使用方法

最新推荐文章于 2024-08-15 16:08:21 发布

州本合

最新推荐文章于 2024-08-15 16:08:21 发布

阅读量293

点赞数

分类专栏：微信小程序笔记与总结

本文链接：https://blog.csdn.net/weixin_43635751/article/details/106403800

版权

微信小程序笔记与总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.1 代码的规范，

JS大规范驼峰式命名法。

每一行JS代码到底要不要加分号（不加分号）

1.2 微信小程序布局，首选flex布局，因为微信小程序对flex布局很友好。

根据 sitemap 的规则[0]，当前页面 [pages/classic/classic] 将被索引

这个微信小程序更新后，检索的设置，可以在配置里面project.config.json中添加setting中配置字段checkSiteMap

设置为false 重新刷新页面就可以解决了。

1.4块级元素默认占据一整行的，可以把小程序中的view 理解成网页中的div标签。 flex 是flexible box弹性盒子。

1.5 几个元素放置在弹性容器盒子中，块状元素的特性就被消除掉了。实例：

/*wxml结构*/
<view class="container">
  <view class="chunk color1"></view>
  <view class="chunk color2"></view>
  <view class="chunk color3"></view>
</view>
/*wxss样式*/
.container{
  /* 默认就会取消view 块状元素特性了。 */
  display: flex;
  flex-direction:row;
}
.chunk{
  width:200rpx;
  height:200rpx;
}
.color1{
  background-color:red;
}
.color2{
  background-color:green;
}
.color3{
  background-color:blue;
}

其中 flex-direction:;属性值有四个 row(从左到右) row-reverse（从右到左排列） column（从上到下排列） column-reverse（从下到上排列） eg略。小程序的宽度是固定的，高度是自适应的。

1.6flex容器第二属性是决定主轴的排列对齐方式 justift-content:flex-start(左对齐) flex-end(右对齐) center(居中对齐)

space-between(两端对齐) space-around(每个项目的两则间隔相等，项目之间的间隔比项目与边框的间隔大一倍) 等距分布

1.7flex的第三个属性是决定交叉轴，因为有主轴，那么一定有控制交叉轴的。align-items:flex-start(起点对齐) flex-end(终点对齐)

center 中点的对齐方式 baseline 基线的对齐方式 stretch （如果项目未设置高度或者auto.我将占满整个容器的高度。） eg:

<view class="container">
  <view class="chunk color1"></view>
  <view class="chunk color2"></view>
  <view class="chunk color3"></view>
</view>

.container{
  /* 默认就会取消view 块状元素特性了。 */
  display: flex;
  flex-direction:column;
  /* 主轴 */
  justify-content:center;
  /* 交叉轴 */
  align-items:center;
  height:400rpx;
  background-color:#999;
}
.chunk{
  width:100rpx;
  height:100rpx;
}
.color1{
  background-color:red;
}
.color2{
  background-color:green;
}
.color3{
  background-color:blue;
}