Flexible Box 布局与小程序开发

参考资料：
1.A Complete Guide to Flexbox BY CHRIS COYIER
2.Flex 布局教程：语法篇
3.Flex 布局教程：实例篇
4.A Visual Guide to CSS3 Flexbox Properties

MD by Jimbowhy and you can visit my articles on https://www.jianshu.com/u/92a796ff3db5

PS: 2021/02/05 更新一个 FlexBox 工具，参考我的 Next.js Tutorial 项目

• https://next-js-tutorials.vercel.app/zh-CN/posts/flexbox
  
  学习 Flexbox 你只需一个工具

背景介绍

传统WEB布局的解决方案基于盒状模型，通过 display 指定 block、inline-block 属性， 再结合定位 position，浮动 float，边距 margin 和填充 padding 等实现WEB页面的布局，这种布局还不是非常灵活，很难实现一些特别的布局场景，如固定在页面底部的状态条，也缺少动态调整能力，只能使用百分比来调节元素在页面的大小比例，做不到精确控制。

为此在2009年，W3C 提出了一种标准化方案，即 Flexible Box Layout 布局。 这种布局的最大特点就是可控的灵活性，完整的 Flex Box 应用涉及容器 Flex Container 和子元素 Flex Items 两方面。给容器指定 display:flex; 打开 Flex Box 布局，然后给容器设置一系列的属性来控制容器下所以实现子元素的横向排列，或纵向排列。 横向排列有点像传统的 display:inline ，所有元素会拼在一起。但是 Flex Box 加入了新鲜的控制熟悉，可以实现传统CSS难以实现的布局效果，如内容间距平分。 针对子元素还有一套属性来设置特殊布局效果，如渲染顺序 order 属性，用它来控制子元素在视图出现的先后位置，这就是 Fles Box 灵活性的表现之一。

关于 Flexible Box 的基础内容在参考资料中都有很详细的解说，这里不再重复，只针对传统 CSS 做一个功能总结。

基本布局方向控制主轴与侧轴

Flex Box 引入了两个重要的一维参考线，主轴参考线 main axes 和侧轴参考线 cross axes，有了这两条参考线，Flex Box 就可以灵活控制两个维度布局控制。主轴和侧轴的概念要和 flex-direction 关联起来理解，默认情况下，是 flex-direction:row, 这时主轴就是横向的那条，如果是 flex-direction:column 则主轴是竖直那条参考线。

传统CSS盒子模型是做不到布局方向控制的，inline-block 也只是流式排版，纵向则通子元素的 block 的自动换行来实现，或者通过控制父级元素宽度来强迫子元素换行，这种方式没有很好地适应用户设备的多变特点，布局显得呆板。

Flex Box 通过 flex-direciton 属性来实现子元素的行、列布局，子元素对应占据一列、一行，除非设置了 flex-wrap，否侧 Flex Box 只渲染一行、一列。 子元素的行、列渲染又可以倒着顺序进行，使用 reverse 来反转开始点，即从左到右、从右到左、从上到下、从下到上，形成四种基本的布局效果：

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

结合 flex-wrap 可以使单行渲染变成多行，如果一行显示不了所有子元素，同样也可以将单列渲染成多列。

子元素对齐控制

因为 Flex Box 有两条参考线，所以对齐也是用两个属性来对应控制的，justify-content 控制主轴方向的对齐，即 main axes 方向，align-items 则控制侧轴方向的对齐，即 cross axes 方向。没有使用 reverse 的情况下 start 表示起点，对应 left 或 top，终点用 end 表示，对应 right 或 bottom。间距调整的三个值是比较有意思的，应为它们具有相当的灵活性，space-between 表示把多余的空间留在子元素中间，元素开头和结尾就不分配空间。 space-around 表示将多余空间均匀分配包围到每个子元素，这样中间的元素因为有两个空间重叠而相当空间更大。 space-evenly 则将空间均分配到子元素的间隔中，和 space-around 不同之处就是看起来子元素空隔更均匀。子元素的 flex-basis 属性就和空间分配有关系，不过这使用上没有很大需求。

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: flex-start | flex-end | center | baseline | stretch;

除了以上两个对齐属性，Flex Box 还有一个对齐属性，align-content 称之为侧轴对齐。它在单线模式下无效，即在多行、列时才有效，与align-items 对比它的作用是将多行、列进行对齐。即对 flex-direction:row 来说，使用 flex-wrap 会产生多行，这时使用 align-content 会对多行进行上下位置的调整。 如果使用 flex-direction:column，侧轴对齐则是在左右方向调整每列的位置。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

补充一下 stretch 这个值，在子元素没有设置 flex-grow 的情况下是没有效果的，flex-grow 默认值是 0 即不许更改大小。

子元素指定渲染顺序

Flex Box 可以对子元素单独设置 order 来控制子元素出现的位置，默认值是0，指定 order， 子元素就会以数字的小到大顺序进行渲染。

.item {
  order: <integer>; /* default is 0 */
}

子元素大小可调节

调节子元素的大小是 Flex Box 的一个重要的能力，通过指定 flex-grow，子元素就会得到相应增大尺寸的能力。相对地，通过 flex-shrink 使子元素获得优先被缩小的能力，属性值越大能力越强。这个属性要结合容器的 align-item:stretch 才有效，但最终控制权还在子元素这里。

.item {
  flex-grow: <number>; /* default 0 */
}

.item {
  flex-shrink: <number>; /* default 1 */
}

子元素可以自定位

前面提到的 align-items 可以设置子元素的对齐，Flex Box 给子元素提供了 align-self 属性来实现对齐的特殊化能力，通过子元素的特殊对齐，来实现特定场景效果。

实现一个排名页面

这个页面主要有一个可伸缩的列表构成，其他按钮为次要功能，想来看效果图：

iPhone5.png

iPhone7.png

Nexus6.png

页面结构分成三部分，头部包含两个图标按钮，内容部分使用了一个 scroll-view 来显示列表，父容器具有伸缩适应能力，滚动列表跟随伸缩，页脚只包含一个跳转按钮，页面的图标可以随意使用一个图片替代。

<!--page/ranking/ranking.wxml-->
<view class="container">
    <view class="header">
        <view class="item">
            <image src="../../../image/ranking (6).png" />
            <text>分组排名</text>
        </view>
        <view class="item">
            <image src="../../../image/ranking (5).png" />
            <text>全站排名</text>
        </view>
    </view> <!-- header end -->

    <view class="content"><scroll-view scroll-y='true'>
        <view class="item">
            <image src="../../../image/ranking (2).png"></image>
            <text></text>
        </view>

        <view class="item">
            <image src="../../../image/ranking (3).png"></image>
            <text></text>
        </view>

        <view class="item">
            <image src="../../../image/ranking (4).png"></image>
            <text></text>
        </view>

        <view class="item">
            <image src="../../../image/ranking.png"></image>
            <text></text>
        </view>

    </scroll-view> 
  </view> <!-- content end -->

    <view class="footer">
        <!-- <navigator open-type='switchTab' url="/page/index/index"> -->
    <navigator open-type='navigateBack' delta='1' url="/page/index/index">
      <button class="button">返回首页</button>
    </navigator>
    </view> <!-- footer end -->

</view> <!-- container end -->

样式定义需要注意，page > container > content 完整传递了高度信息 height:100%，只有这样 Flex Box 才能推断出 content 获得多余的空间的值。给 container 打开 flex 模式并设置为列渲染模式。 在头部 header 的两个带文字的图标按钮也类似，列渲染模式产生自动换行的效果。

/* page/ranking/ranking.wxss */
page { background: #750202; width: 100%; height: 100%; }
.container  { 
  display: flex; flex-direction: column; align-items: stretch; align-content: stretch;
  height: 100%; margin: 0rpx; 
}
.footer { margin: 32rpx 64rpx; }
.header { display: flex; flex-direction: row; justify-content: center; margin-bottom: -32rpx;}
.header .item {
  display: flex; align-items: center; flex-direction: column; 
  border-radius: 72rpx; background: #e5e8b1;
  position: relative; top: 18rpx; margin: 16rpx; padding-top: 16rpx;
  height:100%;
 }
.header .item image { width: 72rpx; height: 72rpx; }
.header .item text {  display: block; font-size: 24rpx; }

.content {
  flex-grow: 1;
  border-radius: 24rpx; border:1px solid #D3532D; background: #e5e8b1;
  height: 100%; min-height: 900rpx; margin:0 64rpx; padding-top: 68rpx
}
.content .item { border-bottom: 1px solid #4f161d; margin:16rpx 32rpx; padding-bottom:16rpx;}
.content .item image { width: 64rpx; height: 64rpx; display: flex; align-content: center; }
scroll-view { display: block; height: 100%; }
.button {
  color: #fff; background: #EFA97A; 
  font-size: 34rpx; line-height: 36px; border-radius: 24rpx;
}