HTML 与 CSS · 单选题 · 第 4 题
前端与全栈开发面试 · 第 4 题
flex 布局中,flex: 1 等价于?
- Aflex-grow: 1; flex-shrink: 1; flex-basis: 0%
- Bflex-grow: 1; flex-shrink: 1; flex-basis: auto
- Cflex-grow: 1; flex-shrink: 0; flex-basis: 0%
- Dflex-grow: 0; flex-shrink: 1; flex-basis: auto
答案
A A. flex-grow: 1; flex-shrink: 1; flex-basis: 0%
解析
flex: 1 的基准尺寸是 0,剩余空间按 grow 比例分配,所以几个 flex: 1 的子项会等宽,与内容多少无关。flex: auto 才是 1 1 auto,先按内容尺寸再分配剩余空间,宽度会受内容影响。初始值 flex: initial 是 0 1 auto。