弹性布局及前端

取值

含义

对应标签

特点

block

块级

div、p、h、ul、li等等

独占一行；设置宽高有效；默认宽度与父元素等宽（流体特性）

inline

行级(内联)

i、a等

非独占一行;设置宽高无效；默认紧紧包住内容(包裹性)

inline-block

行级(行块)

img、表单元素

非独占一行；设置宽高有效；默认紧紧包住内容(包裹性)

none

不可见

取值

含义

特点

content-box

标准盒模型

width/height = 盒子的内容

border-box

IE盒模型(怪异盒模型)

width/height = 盒子的内容 + padding + border

取值

含义

参照物

定位后特点

realtive

相对定位

定位前本应该出现的位置

原来的位置还得保留，不允许别人占用；相对定位后可以盖住其它元素；元素相对定位有两个原因：一是自己确实想发生偏移；另一个是单纯的想做为其某个后代的绝对定位的参照物。

absolute

绝对定位

离它最近的、position为relative、absolute、fixed之一的、祖先元素；如果按这个要求没找到，则参照物是doument

定位后具有包裹性；定位后脱离文档流，父元素计算宽高时将忽略绝对定位子元素的存在；定位后不受vertical-align的管理；不管原来怎么样，定位后设置宽高有效

fixed

固定定位

浏览器可视区域

脱离文档流；不会被滚动条卷起来！定位后具有包裹性！

定位后不受vertical-align的管理；不管原来怎么样，定位后设置宽高有效；

属性

取值

含义

注意事项

弹性容器可以使用的相关CSS设置

flex-direction

row | row-reverse | column | column-reverse

设置主轴方向

flex-wrap

nowrap | wrap | wrap-reverse

弹性项目在主轴上摆放时是否允许换行（弹性容器内是否允许出现多根主轴）

flex-flow

上面两个任意组合

这个是对上面两个的合并设置

justify-content

flex-start | flex-end | center | space-between | space-around | space-evenly

弹性项目在主轴上摆放时的对齐方式

align-items

stretch | flex-start | flex-end | center

设置弹性项目在交叉轴上的对齐方式

align-content

stretch | flex-start | flex-end | center | space-between | space-around | space-evenly

设置多根主轴在交叉轴上的对齐方式

一般情况，仅在出现多根主轴时才会使用它

弹性项目上可以使用的CSS属性

flex-grow

0 | 任意正整数

当主轴方向上存在剩余空间时，弹性项目如何瓜分剩余空间

flex-shrink

1 ｜ 任意正整数

当主轴方向上空间不够时，各弹性项目如何收缩

flex-basis

auto | 任意值

显示设定弹性项目参与计算主轴剩余空间的参与值，默认的参与值是自身的实际的宽/高

flex

上面三个的任意组合

对上面三个属性的全写

align-self

inherit｜stretch | flex-start | flex-end | center

不遵从弹性容器的align-items的设定，自己设定一个交叉轴对齐方案

order

任意正整数

设置弹性项目在主轴主向上的摆放顺序