02-小程序：Flex布局

一、简介

• 1.1、flex 布局 (Flexible布局，弹性布局)是在小程序里面常用的布局方式
  官方文档：flexbox
  官方文档：align
• 1.2、开启了 flex 布局元素叫做 flex container(里面的元素叫做flex items)
• 1.3、设置 display属性为 flex 或者 inline-flex 也可以成为 flex container
  flex：flex container 以 block-level 形式存在
  inline-flex：flex container 以 inline-level 形式存在

二、CSS常用属性

• 2.1、应用在 flex container上的CSS属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
  flex 布局模型如下：
  

  

  flex 布局模型

  • <1>、flex-direction (决定了 main axis(主轴) 的方向)
    flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布
    flex-direction：决定了 main axis(主轴) 的方向，有 4 个取值 row(默认值)、row-reverse、column、column-reverse
    

    

    row
    
    
    

    row-reverse
    
    
    

    column
    
    
    

    column-reverse

  • <2>、justify-content 决定了flex items 在 main axis 上的对齐方式，取值如下：
    

    

    justify-content取值

    flex-start(默认值)：与 main start 对齐
    flex-end：与 main end 对齐
    center：居中对齐
    space-between：flex items之间的距离相等，flex items与main start、main end 两端对齐
    space-evenly：flex items之间的距离相等，flex items与main start、main end之间的距离等于flex items之间的距离
    space-around：flex items之间的距离相等，flex items与main start、main end之间的距离等于flex items之间的距离的一半

  • <3>、align-items 决定了flex items 在 cross axis 上的对齐方式，取值如下：
    

    

    align-items取值
    
    stretch(默认值)：当flex items在 cross axis 方向上的size为auto时，会自动拉伸填充 flex container
    flex-start：flex items与cross start对齐
    flex-end：flex items与cross end对齐
    center：居中对齐
    baseline：与基准线对齐

  • <4>、flex-wrap 决定了 flex container 是单行还是多行
    nowrap(默认)：单行
    wrap：多行
    wrap-reverse：多行(对比wrap,cross start与cross end 相反)

  • <5>、flex-flow ：是 flex-direction || flex-wrap 的简写，如下
    flex-flow:column wrap 等价于 => 如下

    flex-direction:column
    flex-wrap:wrap
    

    flex-flow:row reverse 等价于 => 如下

    flex-direction:row reverse
    flex-wrap:nowrap
    

    flex-flow:wrap 等价于 => 如下

    flex-direction:row
    flex-wrap:wrap
    

  • <6>、align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与justify-content类似
    

    

    align-content取值
    
    stretch(默认值)：与 align-items 的 stretch 类似
    flex-start：与 cross start 对齐
    flex-end：与 cross end 对齐
    center：居中 对齐
    space-between：flex items之间的距离相等；flex items与cross start、cross end两端对齐
    space-around：flex items之间的距离相等；flex items与cross start、cross end之间的距离是flex items之间距离的一半
    space-evenly：flex items之间的距离相等；flex items与cross start、cross end之间的距离是flex items之间距离的一半

• 2.2、应用在 flex items 上的CSS属性：flex、flex-grow、flex-basis、flex-shrink、order、align-self

  • <1>、order 决定了 flex items的排布顺序：可以设置任意整数(如：正整数、负整数、0)，值越小就越排在前面，默认值是0,如下代码，因为 3 的order最大，其他的都是默认0，所以 3 排在最后

    

    order

    
    
    
        
        
        
        
        
    
    
        
    
             
    1
             
    2
             
    3
             
    4
             
    5
        
    
    
    
    

  • <2>、align-self
    flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
    auto(默认值)：遵从 flex container 的 align-items设置
    stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

  • <3>、flex-grow：决定了 flex items 如何沿主轴方向 扩展

    • (1)、可以设置任意非负数子(正小数、正整数、0)，默认值是0；当 flex container 在main axis 方向上有剩余 size 的时候，flex grow 的属性才会生效

    • (2)、如果所有的 flex items 的 flex-grow 总和sum 超过 1，每个flex item扩展的size为flex container的剩余 size * flex-grow / sum

      提示：sum指的是 所有flex item的flex-grow 之和

    • (3)、如果所有的 flex items 的 flex-grow 总和sum 不超过 1，每个flex item扩展的size为flex container的剩余 size * flex-grow

    • (4)、 flex items 扩展后的最终 size 不能超过 max-width/max-height

  • <4>、flex-shrink：决定了 flex items 如何沿主轴方向 收缩

    • (1)、可以设置任意非负数子(正小数、正整数、0)，默认值是1；当 flex container 在main axis 方向上超过了flex container的 size 时候，flex shrink 的属性才会生效

    • (2)、每个 flex items 收缩的 size为 flex items超出flex container的size * 收缩比例 / 所有 flex items 的收缩比例之和

      提示：

      • (1)、每个flex item的flex-shrink之和>=1才是：每个 flex items 收缩的 size为 flex items超出flex container的size * 收缩比例 / 所有 flex items 的收缩比例之和
      • (2)、每个flex item的flex-shrink之和 < 1 则：每个 flex items 收缩的 size为 flex items超出flex container的size* flex-shrink之和 * 收缩比例 / 所有 flex items 的收缩比例之和
      • (2)比(1)多一个 * flex-shrink之和

    • (3)、收缩比例 = flex-shrink * flex-item 的base size，base size 就是 flex item 放入 flex container 之前的 size

    • (4)、 flex items 最终收缩的 size 不能小于 max-width/max-height

    提示
    收缩比例** = flex-shrink * flex-item 的base size，对于 base的size要看main axis 方向来决定是 width还是height

  • <5>、flex-basis：用来设置 flex items 在main axis 方向的base size，如果main axis 方向是宽：那么base size设置的就是宽度；如果main axis 方向是高：那么base size设置的就是高度。

    • auto(默认值)、content：取决于内容本身的size
    • 决定 flex items 最终base size的因素，从优先级高到低
      (1)： max-width/max-height/min-width/max-height
      (2)：flex-basis
      (3)：width/height
      (4)：内容本身的 size (前三个没有设置的情况下，4 生效)

  • <6>、flex 是 flex-grow flex-shrink? || flex-basis 的简写，其中 ? 表示可有可无，|| 表示 flex-shrink 和 flex-basis 可以出现一个

    • flex 默认值是：0 1 auto
    • 取值 none 是 0 0 auto

三、应用在 flex container 和 flex items 上的CSS属性的总结

• 3.1、 flex container
  • <1>、flex-flow 是 flex-direction || flex-wrap 的简写
  • <2>、flex-direction 设置主轴 (main axis) 的方向
  • <3>、flex-wrap 设置是否能换行
  • <4>、justify-content 设置 flex items 在 main axis 上的对齐方式
  • <5>、align-items 设置 flex items 在cross axis 上的对齐方式(一般是针对单行)
  • <6>、align-content 设置 flex items 在 cross axis 上的对齐方式 (一般是针对多行)
• 3.2、 flex items
  • <1>、flex 是 flex-grow flex-shrink? || flex-basis 的简写
  • <2>、flex-grow 决定了flex items 在main axis 方向如何扩展
  • <3>、flex-shrink 决定了 flex items 在 main axis 方向上如何收缩
  • <4>、flex-basis 设置 flex items 在main axis 方向上的 base size(具体是宽还高要根据main axis来决定)
  • <5>、order 设置flex items 的排布顺序
  • <6>、align-self 允许 flex items 覆盖 flex cintainer设置的 align-items