flex布局方式

小程序样式控制是通过wxss文件来控制，实现复杂布局一般都是通过flex布局方式来实现，要使用 flex 布局的话需要显式的声明：display:flex;

flex-direction属性

首先我们不管是横向布局和竖向布局，要设置属性 flex-direction ,它有4个可选值：

  • row：从左到右的水平方向为主轴
  • row-reverse：从右到左的水平方向为主轴
  • column：从上到下的垂直方向为主轴
  • column-reverse：从下到上的垂直方向为主轴

    row

    ```java index.wxss: .page{ display: flex; flex-direction: row; } index.wxml:
布局样式 - 图2 {{name}} 

  1. 效果图:<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/26240361/1646616577724-46b92b75-153a-4d33-a2ca-a082d337500e.png#clientId=u50465024-658d-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=152&id=u8b94e69f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=304&originWidth=408&originalType=binary&ratio=1&rotation=0&showTitle=false&size=142087&status=done&style=none&taskId=u64163255-576e-43b5-8da4-47ef40aa5ef&title=&width=204)
  2. <a name="mVX7k"></a>
  3. #### row-reverse
  4. ```java
  5. .page{
  6.   display: flex;
  7.   flex-direction: row-reverse;
  8. }

效果图:
image.png

column

.page{
  display: flex;
  flex-direction: column;
}

效果图
image.png

column-reverse

.page{
  display: flex;
  flex-direction: column-reverse;
}

效果图:
image.png

justify-content属性

这个属性指的是主轴方向上的子元素的布局方式，它有5个可选值：

  • flex-start：主轴起点对齐(默认值)
  • flex-end：主轴结束点对齐
  • center：在主轴中居中对齐
  • space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
  • space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

这里的主轴指的是父元素中的flex-direction属性指定的元素

flex-start:

image.png

flex-end：

image.png

center:

image.png

space-between:

image.png
space-around:

image.png

align-items属性

这个属性指的是侧轴方向上的子元素的布局方式，它有5个可选值：

  • stretch 填充整个容器，当元素未设置侧轴方向的长度时，充满父元素，如设置了侧轴方向长度，则以子元素设置的长度为准(默认值)
  • flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）
  • flex-end 侧轴的终点对齐
  • center 在侧轴中居中对齐
  • baseline 以子元素的第一行文字对齐

这里的侧轴指的是父元素中的flex-direction属性指定的元素方向的垂直的方向

stretch

效果图:

flex-start

效果图:

flex-end

效果图:

center

效果图:

baseline

效果图: