微信小程序CSS Flexbox(弹性盒子)布局模块

容器中使用flexbox

flexbox的模型

当元素表现为 flex 框时，它们沿着两个轴来布局：

名词说明

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
• 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）

实例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

含有三个项目的flex容器，其实就是一个普通的容器标签，在样式表中通过将他的display属性值设置为flex，就可以作为伸缩容器用了。

.flex-container {
  display: flex;
}

flex容器的属性

flex-direction

定义容器在哪个方向上来排列子项目

可选值	含义	示例
column	垂直方向上排列，从上到下
column-reverse	也是垂直方向上，不过是从下到上的
row	水平方向上排列，从左到右
row-reverse	水平方向上排列，从右到左

flex-wrap

规定是否对flex的子项目进行换行操作，当子项目水平排列的时候，一行的项目过多是否对其进行换行的操作。

可选值	含义	示例
wrap	在必要的时候换行
nowrap	不进行换行，此值为默认值
wrap-reverse	必要的时候换行，不过要以相反的顺序换行，相当于从下到上换行

flex-flow

这个参数是对flex-wrap和flex-direction的组合参数，通过这一个属性可以设置两个属性的值

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

通过设置flex-flow把flex-direction设置为row(水平布局)，flex-wrap设置为wrap(必要时换行)。

justify-content

控制flex子项目在主轴上的位置。

可选值	含义	示例
center	将flex的子项目向主轴上中心位置对齐
flex-start	将子项目向主轴开始位置对齐，即main start位置，本例中最左侧
flex-end	将子项目向主轴结束位置对齐，即main end位置，本例中最右侧
space-around	主轴方向上，在每个子项目的前后都加上空格
space-between	主轴方向上在两个子项目之间加上空格(头尾没有空格)

align-items

控制flex子项目在交叉轴上的位置。

可选值	含义	示例
center	子项目向交叉轴中心位置对齐
flex-start	子项目向交叉轴起始位置对齐，即cross start位置，本例中最上方
flex-end	子项目向交叉轴结束位置对齐，即cross end位置，本例中最下方
stretch	交叉轴方向拉伸子项目填充容器，此值为默认值
baseline	子项目与基线（容器中心水平线）对齐

align-self

与align-item相同也是定义了交叉轴方向上的对齐方式，可选值也是相同的，但是这个属性用于子项目自身，它会覆盖掉父容器的align-item属性值。下面的例子中设置父容器的align-item=flex-start，单独设置子项目“2”align-self属性为center，效果图如下：

align-content

定义了子项目的填充方式，即flex容器内部子项目从哪个位置开始填充。该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。

可选值	含义	示例
center	所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离
flex-start	所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行
flex-end	所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐
space-between	所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐
stretch	拉伸所有行来填满剩余空间，剩余空间平均地分配给每一行，此值为默认值

子项目居中

justify-content(主轴方向) 和 align-items(交叉轴方向) 属性设置为center(居中)，就可以实现子项目的居中。在微信小程序中我只设置了justify-content就实现了居中，不知道是什么情况。

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}