微信小程序Flexbox布局学习笔记

Flexbox 布局

       微信小程序通过Flexbox模型布局对组件进行排列。相比于普通的布局方式，Felxbox更容易实现宽高适合屏幕的布局，使用起来更灵活，非常适合于微信小程序的布局要求。

基本要素

    Felxbox布局的主要思想为通过设定容器(flex container)与子元素(flex item)的规则，使所有view组件在主轴(main axis)与侧轴(cross axis)上合理的自动分配，其模型如下图所示。

            

   基本上，弹性项（flex item）会沿着主轴方向（main-start到main-end）或侧轴方向(cross-start到cross-end)排列。

• 主轴（main axis） :弹性项主要是沿着弹性容器的主轴进行排列的。要注意一点，他不一定是水平的；这主要还是看flex-direction属性（见下文）。
• 主轴起点/主轴终点main-start | main-end : 弹性项将由main-start到main-end方向放置在容器内。
• 主轴尺寸main size :弹性项在主轴方向的宽度或高度就是主轴的尺寸。弹性项主要的大小属性可以是宽度，也可以是高度属性，由哪一个对着主轴方向决定。
• 侧轴cross axis : 与主轴垂直相交的轴线就是侧轴。它的方向由主轴决定。
• 侧轴起点/侧轴终点cross-start | cross-end : 弹性行是由弹性项填充起来的，它的配置是从容器的cross-start开始，往cross-end结束。
• 侧轴尺寸cross size :弹性项在侧轴方向的宽度或高度就是cross size。cross size根据侧轴的方向来取决是宽度还是高度。

容器属性

容器属性指的是包裹子元素的容器(flex container)属性，如下图所示。

                                

对于下面的布局文件(.wxml)，容器属性为container需要在格式文件(.wxss)中设定的属性，用来规定在这个view(class="container")下所有子view(class="child")的排列方式。

<view class="container">
   <view class="child"></view>
   <view class="child"></view>
   <view class="child"></view>
</view>

display

使用display:flex或display:infile-flex来定义容器为伸缩容器。

.container {
  display: flex; /* or inline-flex */
}

需要注意CSS的columns在flex容器里没有效果。

flex-direction

这个是建立在主轴上的，从而定义了弹性项放置在容器的方向。FlexBox是单方向的布局概念。可以将弹性项视为主要布置在水平行或垂直列中。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列。
• row-reverse：与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列。
• column：类似于row但是是顶部到底部
• column-reverse：类似于row-reverse但是是底部到顶部

flex-wrap

弹性项默认会全部集中在一行。你可以使用这个属性来改变这种情况，让他们根据你的需要进行自动换行。文档方向在这里也起作用，决定了新的一行被堆叠的方向。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：单行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
• wrap：多行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
• wrap-reverse：多行显示。与wrap相反

flex-flow（定义在弹性容器中）

这个是flex-direction和flex-wrap属性的缩写版，它同时定义了弹性容器的主轴和侧轴。默认是row nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

这属性是用来定义主轴上的对齐方式的。当所有的弹性项在一行并且无法弹性伸展，或者可伸展但是达到了最大尺寸，它能帮助分配剩下的多余空间。并且当他们行内溢出时，这个属性也可以对项目对齐施加一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默认）：子项会从一行的起始处开始放置
• flex-end：子项会从一行的结尾处开始放置
• center：子项会集中在一行的中央
• space-between：子项会被均匀的分布在行内；首项放置在一行的开始，尾项放置在一行的结束
• space-around：子项会均匀的按照同等距离分布在一行。需要注意的是，在视觉上会觉得并不等距，因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离，但是与下一项会有两个单位空间的距离，因为下一项也有它自己的适配空间。

align-items

这用来定义弹性项目在弹性容器的当前侧轴上的默认行为。可以认为是侧轴版的justity-content。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
• flex-end：弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。
• center：弹性项会被放置在侧轴的中央。
• baseline：弹性项会根据他们的基线对齐。
• stretch（默认）：在侧轴方向上拉伸弹性项以致填充满弹性容器。（任遵从min-width/max-width）

align-content

这个属性会根据在侧轴上的额外空间来排列容器的行，类似于justify-content在主轴在对齐单个弹性项的方式。

注意，这个属性对于只有单行的弹性项来说是没有效果的。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：行会紧靠容器的起始位
• flex-end：行紧靠容器的结束位
• center：行紧靠容器的中间位
• space-between：每行会均匀分布；首行在容器起始处而最后行在容器结束处
• space-around：每行根据相同的距离均匀的分布
• stretch（默认）：每行将会伸展以占用剩余的空间。