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 布局模型

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