从零开始自制微信小程序9--初识微信小程序5--快速实现基本布局--应用弹性盒子布局

<view class='container'>
  <image src="/images/004.jfif"></image>
  <text>电影周围看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：xxxx</text>
</view>

一个简单的布局需求：1从上往下，2相对均匀分布，3水平居中

传统实现方式，以及其问题

.container {
  background-color: #eee;
  height:100vh;

  text-align: center;
}
text{
  display: block;
}
image, text {
  margin-bottom: 60px;
}

vw、vh与 % 的区别：

1. % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
2. vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

参考https://blog.csdn.net/qq_42618566/article/details/101752942?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160629514019195283016442%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160629514019195283016442&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v28-1-101752942.pc_search_result_no_baidu_js&utm_term=wxss+%E4%B8%ADvh&spm=1018.2118.3001.4449

传统方式

1.布局目标的实现 属性复制非常分散

2.严重依赖于页面结构，与内容实际大小

 

用弹性盒子布局 快速实现 三大布局目标

.container {
  background-color: #eee;
  height:100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
}

弹性盒子布局

1.相关的wxss属性赋值 比较统一

2.方式灵活

 

基于flexbox layout的实现

flexbox layout的优点