flex布局笔记

Flex 布局

简介

flex 布局（Flexible 布局，弹性盒子）是在小程序开发经常使用的布局方式

官方文档
- https://www.w3.org/TR/css-flexbox-1/
- https://www.w3.org/TR/css-align-3/
开启了 flex 布局的元素叫 flex container
flex container里面的直接子元素叫做 flex items
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
- flex: felx container以 block-level 形式存在
- inline-flex: felx container以 inline-level 形式存在

常用Css属性

应用在 flex container上的 CSS 属性
- flex-fow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
应用在 flex items 上的 CSS 属性
- flex
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self

flex 布局模型

flex-direction

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

felx-direction

justify-content

justify-content决定了 flex items在 main axis 上的对齐方式
- flex-start (默认值)：与 main start 对齐
- flex-end: 与 main end 对齐
- center：居中对齐
- space-between:
  - felx items 之间的距离相等
  - 与 main start、main end两端对齐
- spece-evenly:
  - felx items 之间的距离相等
  - felx items 与 main start、main end 之间的距离等于 felx items 之间的距离
- space-around:
  - felx items 之间的距离相等
  - felx items 与 main start、main end 之间的距离是 felx items 之间距离的一半

justify-content

align-items

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

felx-wrap

felx-warp 决定了 felx container 是单行还是多行
- nowrap(默认)：单行
- wrap: 多行
- wrap-reverse: 多行 (对比 wrap, cross start与 cross end相反)

flex-flow

felx-flow 是 felx-direction || felx-warp 的简写
- 比如 felx-flow : column wrap 等价于
  - felx-direction: column
  - flex-wrap: wrap
- 比如 flex-flow: row-reverse 等价于
  - felx-direction: row-reverse
  - flex-wrap: nowrap
- 比如 flex-flow: wrap 等价于
- flex-direction: row
- flex-wrap: wrap

align-content

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似
- stretch (默认值）：与 align-items 的 stretch 类似
- flex-start: 与 cross start 对齐
- flex-end：与 cross end 对齐
- center: 居中对齐
- space-between:
  - felx items 之间的距离相等
  - 与 main start、main end两端对齐
- spece-evenly:
  - felx items 之间的距离相等
  - felx items 与 main start、main end 之间的距离等于 felx items 之间的距离
- space-around:
  - felx items 之间的距离相等
  - felx items 与 main start、main end 之间的距离是 felx items 之间距离的一半
    
    align-content

order

order 决定了 flex items 的排布顺序
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
- 默认值是0

align-self

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

flex-grow

flex-grow 决定了 flex items 如何扩展
- 可以设置任意非负数字（正小数、正整数、0），默认值是 0
- 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow / sum
如果所有 flex items 的 flex-grow 总和不超过 1，每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow
flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink

flex-shrink 决定了 flex items 如何收缩
- 可以设置任意非负数字（正小数、正整数、0），默认值是 1
- 当 flex items 在 main axis 方向上超过了 flex container 的 size , flex-shrink 属性才会有效
每个 flex items 收缩的 size 为
- felx items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
收缩比例 = flex-shrink * flex item 的 base size
- base size 就是 flex item 放入 flex container 之前的 size
flex items 收缩后的最终 size 不能小于 min-width \ min-height

flex-basis

flex-basis 用来设置 flex items 在 main axis 方向上的 base size
- auto (默认值)、content ：取决于内容本身的 size
决定 flex items 最终 base size 的因素，从优先级高到低
- max-width \ max-height \ min-width \ min height
- flex-basis
- width\height
- 内容本身的 size

flex

flex 是 flex-grow flex-shrink? || flex-basis 的简写
- 默认值是 0 1 auto
- none: 0 0 auto

总结：
------------------------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 上的对齐方式（一般是针对多行）
-------------------------flex items------------------------------------
    7、flex 是 felx-grow flex-shrink? || flex-basis 的简写
    8、flex-grow 决定了 flex items 在main axis 方向上如何扩展
    9、flex-shrink 决定了 flex items 在 main axis 方向上如何收缩
    10、flex-basis 设置 flex items 在 main axis 方向上的 base size
    11、order 设置 flex items 的排布顺序
    12、align-self 允许 flex items 覆盖 flex container 设置的 align-items