原创:新手布局福音!微信小程序使用flex的一些基础样式属性
3 月,跳不动了?>>> Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明。 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺序方向。 main start 和 main end 是指项目的开始和项目的结束是按照排列方向的起点和终点。 再来看看flex的相关属性: 我们给定一个结构: <div class="container"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> ... </div> 在微信小程序里面可以是这样的结构: <view class="container"> <view class="item1"></view> <view class="item2"></view> <view class="item3"></view> ... </view> 当我们要用时这个布局的时候对于外层的结构,我们对他的css样式设定: <style