微信小程序开发之七 —— Flex、Grid与List布局

学习前后

上一篇：微信小程序开发之六数据绑定与列表渲染
下一篇：微信小程序开发之八 —— swiper、video、map组件与cover效果

Flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
我们可以在页面的.wxml输入如下代码：

<view class="flex">
  <view class="item">JAVA</view>
  <view class="item">Python</view>
  <view class="item">小程序</view>
  <view class="item">CSS</view>
</view>

为了让它们区分地更加明显，我们给它加个背景色，边框，让其居中处理，写在.wxss文件里面。

  .item{
   
    background: #1317df;
    height: 100px;
    text-align: center;
    border: 1px solid #1aabe4;
  }

结果如下：

现在是上下关系，如果想要弄成左右关系我们需要在给外层结构view组件加display:flex，即flex布局。

  .flex{
   
    display: flex;
  }

结果如下：

可以看到使用flex布局后就变成了左右关系了，但这样看起来不好看，我们一开始希望的是它能跟前面一样均分，然后让里面的内容也居中就更好了，所以我们要给这四个item的进行修饰一下。

 .item{
   
    background: #1317df;
    height: 100px;
    text-align: center;
    border: 1px solid #1aabe4;
    display: flex;
    flex: 1;
    align-items: center;    /*垂直居中*/
    justify-content: center; /*水平居中*/
  }

flex是弹性布局，flex:1这个样式是一个相对概念，这里的相对是指这每个item的宽度之比都为1