1.order
运行结果:
2. align-self
align-self:center
运行结果:
3.flex-end
运行结果:
4.flex-grow 默认值为0,用于决定项目现有剩余空间的情况下是否放大,默认不放大
- 即使设置了宽度,如果设置了放大,那么宽度失效。
- 多个flex项目同时放大,如果数值越大,放大的比例也越大。
- 多个flex项目根据放大比例,重新分配了剩余空间。<!DOCTYPE html>
运行结果:5. flex-shrink
- 不换行、换列的情况下有效。
- 设置缩小。默认值为1,默认情况下,会等比例缩小,宽度失效。
- 设为0,表示不缩小。
- 数值越大,缩小的比例也越大。
运行结果:设置项目的缩小比例,如果空间不足,项目将会缩小。属性值不能为负数,默认为1
6.flex
取值默认:0 1 auto。flex属性是 flex-grow、flex-shrink与flex-basis的简写。用于定义项目放大,缩小
与宽度。
flex有两个快捷值:
- auto。表示(1 1 auto)等分放大缩小。
- none。表示(0 0 auto)不放大,但等分缩小。
运行结果: