Flex

这是一篇阮一峰Flex博客的阅读笔记
原文在此

1. 设置flex

• 任何一个容器 display: flex;
• 行内元素 display: inline-flex;
• 设置flex后，float，clear，vertical-align将失效

2. 概念

• flex container 容器
  • 容器成员称为 flex item 项目
  • 水平轴 main axis （main start + main end）
  • 垂直轴 cross axis （cross start + cross end）
  • 单个项目占据的主轴空间称为 main size

3. 容器属性

• flex-direction
  • 主轴方向
  • row | row-reverse | column | column-reverse
• flex-wrap
  • 一条线排不下，如何换行
  • nowrap | wrap | wrap-reverse
  • wrap-reverse反向换行，向上换行
• flex-flow
  • 是direction和wrap的简写，默认值是row wrap
• justify-content —> main
  • 定义项目在主轴上的对齐方式
  • flex-start | flex-end | center | space-between | space-around
• align-items —> cross
  • 定义项目在交叉轴上的对齐方式
  • flex-start | flex-end | center | baseline | stretch
• align-content
  • 定义了多根轴线的对齐方式
  • flex-start | flex-end | center | space-between | space-around | stretch

4. 项目属性

• order
  • 定义项目的排列顺序
  • 越小越前，默认0
• flex-grow
  • 定义项目的放大比例，如果空间剩余，则充斥。默认0
  • 0表示不因空间变化而变化，其余正数是各项目之间的比例
• flex-shrink
  • 定义项目的缩小比例，如果空间不足，则缩小。默认1
• flex-basis
  • 项目占据的主轴空间main size，默认 auto
• flex
  • grow， shrink， basis的简写
  • 默认0 1 auto
• align-self
  • 单个项目不同于整体容器的对齐规则
  • align-self 会覆盖容器的 align-items
  • 默认auto，表示继承父元素的 align-items