关于flex
-
flex-grow默认值 0;flex-shrink默认值1
-
flex-grow值为0时,不可扩张,即使还有剩余空间
-
flex-shrink值为0时,不可压缩,即使还有溢出空间
-
测试案例如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width:200px; height:200px; display: flex; align-items: stretch; background-color: blueviolet; } /* 如果只写一个有效单位值,则可压缩也可扩张 */ .left{ flex-shrink: 1; flex-grow: 0; flex-basis: 180px; background-color: bisque; } .right{ flex-shrink: 1; flex-grow: 0; flex-basis: 180px; background-color: #ccc; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
只写flex:1 可扩张可压缩
当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:
.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }
只写flex:50px; 可扩张可压缩
当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):
.item-1 {flex: 0%;} .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } .item-2 {flex: 24px;} .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 24px; }