flex布局
| 容器属性 | 作用 | 参数 |
|---|---|---|
| flex-direction | 决定元素排列方向 | row / row-reverse / column / column-reverse |
| flex-wrap | 决定元素如何换行 | nowrap / wrap / wrap-reverse |
| flex-flow | flex-direction和flex-wrap的简写 | <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-start / flex-end / center / baseline / stretch |
| flex元素属性 | 作用 | 参数 |
|---|---|---|
| flex-grow | 当有多余的控件时，元素的放大比例 | <integer> |
| flex-shrink | 当控件不足时，元素的缩小比例 | <number> |
| flex-basic | 元素在主轴上占据的空间 | <length> / auto |
| flex | grow/shrink/basic 的简写 | none 或[ <'flex-grow'> <'flex-shrink'><'flex-basis'> ,该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 |
| ************* | ****** | ****** |
| order | 定义元素的排列顺序（越大，越上层） | <integer> |
| align-self | 定义元素自身的对齐方式 | auto / flex-start / flex-end / center / baseline / stretch |
| ************* | ****** | ****** |
相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己
绝对定位的元素使相对离他最近的一个已定位的父级元素进行定位
