基本概念
- flex时flexible box的简写，意为“弹性布局”。
- main axis: 主轴（横向）
- cross axis: 交叉轴（纵向）
box的属性
flex-direction
- row
- row-reverse
- column
- column-reverse
flex-wrap
- nowrap
- wrap
- wrap-reverse
flex-flow
<flex-direction> || <flex-wrap>
justify-content 主轴方向
- flex-start
- flex-end
- center
- space-between
- space-around
align-items 交叉轴方向
- flex-start
- flex-end
- center
- baseline
- stretch
align-content
只适用于多行的 flex 容器，并且当交叉轴上有多余的空间时。
在多根主轴时，把一根主轴看做一个 item，这些 items 在交叉轴的对齐方式，比如说flex-wrap为wrap时，显示多行。多行之间的竖直对齐。
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
item的属性
order
<integer>，从0开始
flex-grow
<integer>，默认 0
flex-shrink
<integer>，默认 1
flex-basis
<integer>，默认 auto
flex
<flex-grow> || <flex-shrink> || <flex-basis>，可以省略后一个或后两个，也可以省略中间的（感觉这种写法很怪）。
align-self
项目上自己特有的 align-items，会覆盖 box 的该属性。
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
bug集锦
- 在Angular中使用时，如果div上有
[hidden]属性指令，会和flex冲突，因为display不能同时设为flex和none，需要用一层 div 包一下 height: 100%：只有元素的所有父节点都定义有height属性，且部位auto才管用
四中布局的对比
|名字|浏览器的兼容性|适用| |-|-|-| |float|全兼容|文字环绕| |margin|全兼容|| |table|基本全兼容|静态布局，等比布局| |flex||响应式布局| |grid|||
