flex学习笔记

flex

基本概念

flex容器

容器

• 主轴
  • 开始位置 -- main start
  • 结束位置 -- main end
• 交叉轴
  • 开始位置 -- cross start
  • 结束位置 -- cross end

项目

• 默认沿主轴排列
• 主轴空间 -- mainsize
• 交叉轴空间 -- cross size

容器的属性

方向和换行

• flex-direction
  • 决定主轴的方向
  • row(默认值)
  • row-reverse
  • column
  • column-reverse
• flex-wrap
  • 是否换行
  • nowrap(默认值) -- 不换行
  • wrap -- 换行，第一行在上方
  • wrap-reverse -- 换行，第一行在下方
• flex-flow
  • flex-direction和flex-wrap的简写
  • 默认 row nowrap

对齐

• justify-content
  • 项目在主轴上的对齐方式
  • flex-start（默认值）
  • flex-end
  • center
  • space-between -- 两端对齐，项目之间的间隔相等
  • space-around -- 每个项目的两侧间隔相等
• align-items
  • 项目在交叉轴的对齐方式
  • flex-start
  • flex-end
  • center
  • baseline -- 项目的第一行文字的基线对齐。
  • strecth（默认值） -- 如果项目未设置高度或为auto，将占满整个容器的高度
• align-content
  • 多根轴线的对齐方式
  • flex-start -- 与交叉轴的起点对齐
  • flex-end -- 与交叉轴的终点对齐
  • center -- 与交叉轴的中点对齐
  • space-between -- 与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around -- 每根轴线两侧的间隔都相等
  • stretch（默认值） -- 轴线占满整个交叉轴。

项目的属性

排序

• order
  • 定义项目的排列顺序
  • 数值越小，越靠前

大小缩放

• flex-grow
  • 定义项目的放大比例
  • 默认为0 -- 即存在剩余空间也不放大
• flex-shrink
  • 定义项目的缩小比例
  • 默认为1 -- 即如果空间不足，项目将缩小
  • 0 -- 即使空间不足，也不缩小
  • 负值无效
• flex-basis
  • 定义了在分配多余空间之前，项目占据的主轴空间
  • 默认值 auto -- 项目的本来大小
  • 可以设置为固定大小，如350px
• flex
  • 是 flex-grow, flex-shrink 和 flex-basis的缩写
  • 默认值为 0 1 auto
  • auto -- 1 1 auto
  • none -- 0 0 auto
  • 建议优先使用

对齐

• align-self
  • 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items
  • 默认值 auto -- 表示继承父元素的align-items属性