flex #3
Description
不同布局的用途
- block 布局：用来对文档进行布局
- inline 布局：用来对文本进行布局
- table 布局：迎来对 2D 数据进行表格布局
- position 布局：用来进行明确具体位置信息的布局，而不考虑其他元素
- flex 布局：用于更复杂的布局场景，相当于是 block、inline 布局的增强。
flex 容器
设置 display: flex 会创建 flex 容器：
- 建立 flex 格式化上下文（等同于块级格式化上下文）
- 内部的子元素遵循 flex 布局模型进行布局
flex 布局计算是基于文档流的方向（flow directions）来进行的。主轴在文档流的方向，交叉轴和主轴垂直。
在 flex 容器元素中，一些属性不会生效：
clear&float- vertical-align：flex item 的 display 为 block，vertical-align 不生效
:first-line&:first-letter
设置为 inline-flex 在特殊情况下作为 flex 对待，详情：https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo