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 |
| ************* |
****** |
****** |
相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己
绝对定位的元素使相对离他最近的一个已定位的父级元素进行定位
网友评论