在对小程序开发时我们会进行页面的布局。这里我们简单的介绍下flex布局的使用

本文链接：https://blog.csdn.net/chen529834149/article/details/78903341

1、这里这我们新创建一个文件件

接下来我们在app.json中进行引入，方便起见我们把当前新建的目录指向底部导航中去在app.json中找到pages 添加"pages/module/module"

 
  "pages" 
  :[ 
 
  "pages/index/index" 
  , 
 
  "pages/logs/logs" 
  , 
 
  "pages/test/test" 
  , 
 
  "pages/nav/nav" 
  , 
 
  "pages/module/module" 
 
  ], 
 
    "tabBar" 
    : 
    { 
   
    "color" 
    : 
    "#ccc" 
    , 
   
    "selectedColor" 
    : 
    "green" 
    , 
   
    "list" 
    : 
    [ 
   
    { 
   
    "pagePath" 
    : 
    "pages/index/index" 
    , 
   
    "text" 
    : 
    "首页" 
    , 
   
    "iconPath" 
    : 
    "images/usbox.png" 
    , 
   
    "selectedIconPath" 
    : 
    "images/usbox-actived.png" 
   
    }, 
   
    { 
   
    "pagePath" 
    : 
    "pages/test/test" 
    , 
   
    "text" 
    : 
    "测试页面" 
    , 
   
    "iconPath" 
    : 
    "images/featured.png" 
    , 
   
    "selectedIconPath" 
    : 
    "images/featured-actived.png" 
   
    }, 
   
    { 
   
    "pagePath": "pages/module/module", 
   
    "text" 
    : 
    "flx建模" 
    , 
   
    "iconPath" 
    : 
    "images/search.png" 
    , 
   
    "selectedIconPath" 
    : 
    "images/search-actived.png" 
   
    } 
   
    ] 
   
    }, 
   
    接下来我们在module.wxml中: 
   
      < 
      view 
       class= 
      'flex-wrap' 
      > 
     
      < 
      view 
       class= 
      'a' 
      >a 
      </ 
      view 
      > 
     
      < 
      view 
       class= 
      'b' 
      >b 
      </ 
      view 
      > 
     
      < 
      view 
       class= 
      'c' 
      >c 
      </ 
      view 
      > 
     
      </ 
      view 
      > 
     
 创建一个view，里面包含abc三个view文件。我们想实现类似： 
   
    效果
  
    我们在wxss中首先给view父级标签设置成弹性模型 
   
    .flex-wrap{ 
   
    display:-webkit-flex; 
   
    } 
   
    给所有view设置下宽高 
   
      .flex-wrap 
      view 
      { 
     
      width: 
       200 
      rpx 
      ; 
     
      height: 
       200 
      rpx 
      ; 
     
      text-align: 
      center 
      ; 
     
      font-size: 
      40 
      rpx 
      ; 
     
      line-height: 
      200 
      rpx 
      ; 
     
      color: 
       wheat 
      ; 
     
      } 
     
       效果： 
     
       接下来我们给abc设置下背景颜色 
     
      .a 
      { 
     
      flex: 
      1 
      ; 
     
      background-color: 
       green 
      ; 
     
      } 
     
      .b 
      { 
     
      flex: 
      1 
      ; 
     
      background-color: 
       red 
      ; 
     
      } 
     
      .c 
      { 
     
      flex: 
      1 
      ; 
     
      background-color: 
       blue 
      ; 
     
      } 
     
 效果: 
   
    在这里为什么使用rpx，这里不细说，大家可以看文档介绍比较全面 
   
    如果我们把c flex改成2 
   
b占当前的 2/4，这样方便我们不需要计算任何的适配，值这里面flex已经帮我们计算好了
 
  。我们如果想把当前view纵向排列 只需要在父级中增加一个属性即可 
 
    flex-direction: 
     column 
    ; 
   
    height: 
    1000 
    rpx 
    ;