微信小程序开发笔记 flex页面布局

最新推荐文章于 2024-09-19 16:44:07 发布

Lora青蛙

最新推荐文章于 2024-09-19 16:44:07 发布

阅读量1.8k

点赞数 2

分类专栏：微信小程序开发文章标签： flex 小程序

本文链接：https://blog.csdn.net/LoraRae/article/details/105464534

版权

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

4 篇文章 3 订阅

订阅专栏

（笔记总结自中国大学MOOC）
案例：Flex弹性盒模型布局
利用flex弹性盒模型布局实现三栏布局、左右混合布局和上下混合布局：
在这里插入图片描述

<!--pages/kj/demo113-layout/index.wxml-->
<view class='box'>
  <view class='title'>页面布局示例</view>
  <!--实现三栏水平均匀布局-->
  <view style='display:flex;text-align:center;line-height:80rpx;'>
    <view style='background-color:red;flex-grow:1;'>1</view>
    <view style='background-color:green;flex-grow:1;'>2</view>
    <view style='background-color:blue;flex-grow:1;'>3</view>
  </view>
  ---------------------------------
  <!--实现左右混合布局-->
  <view style='display:flex;height:300rpx;text-align:center;'>
    <view style='background-color:red;width:250rpx;line-height:150rpx;'>1</view>
    <view style='display:flex;flex-direction:column;flex-grow:1;line-height:150rpx;'>
      <view style='background-color:green;flex-grow:1;'>2</view>
      <view style='background-color:blue;flex-grow:1;'>3</view>
    </view>
  </view>
  ---------------------------------
  <!--实现上下混合布局-->
  <view style='display:flex;flex-direction:column;line-height:300rpx;text-align:center;'>
    <view style='background-color:red;height:100rpx;line-height:100rpx;'>1</view>
    <view style='flex-grow:1;display:flex;flex-direction:row;'>
      <view style='background-color:green;flex-grow:1;'>2</view>
      <view style='background-color:blue;flex-grow:1;'>3</view>
    </view>
  </view>
</view>

Flex是Flexible Box的缩写，意为”弹性布局”，用来对盒状模型进行布局。如图所示：
Flex弹性盒模型布局
在这里插入图片描述
Flex容器布局

Flex项目布局

利用line-height设置文本垂直居中对齐
line-height可以理解为每行文字所占的高度。比如说，有一行高度为20px的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px，由于每个字的高度只有20px，于是浏览器就把多出来的30px（50px20px）在这行文字的上面加上了15px，下面加上了15px，这样文字就在这50px的空间内是居中的了。