search

shfshanyue / Daily-Question

互联网大厂内推及大厂面经整理，并且每天一道面试题推送。每天五分钟，半年大厂中
https://q.shanyue.tech
4.88k stars 504 forks source link

【Q695】Flex 布局中的 flex-basis 与 width 有何区别 #716

Open shfshanyue opened 2 years ago

shfshanyue commented 2 years ago
  1. 当 flex-direction 为 column 时，主轴为纵轴，此时 flex-basis 与 height 对应
  2. flex-basis 的值为理想情况，而在实际情况中可能被压缩
Neisun commented 10 months ago

flex-basis用于在flex布局时候给定项目的一个初始值， 默认情况下是auto，也就是说根据容器宽度去自动计算，width是给定项目固定宽度。

  1. 当flex布局的主轴是水平方向即flex-direction: row;那么flex-basis设定的就是初始宽度，如果同时存在width，width会覆盖flex-basis属性
  2. 当flex布局的主轴是垂直方向即flex-direction: column;那么flex-basis设定的就是初始高度，如果同时存在height，width会覆盖flex-basis属性; demo示例
ainightf commented 10 months ago

flex-basis用于在flex布局时候给定项目的一个初始值， 默认情况下是auto，也就是说根据容器宽度去自动计算，width是给定项目固定宽度。

  1. 当flex布局的主轴是水平方向即flex-direction: row;那么flex-basis设定的就是初始宽度，如果同时存在width，width会覆盖flex-basis属性
  2. 当flex布局的主轴是垂直方向即flex-direction: column;那么flex-basis设定的就是初始高度，如果同时存在height，width会覆盖flex-basis属性; demo示例

我觉得你说错了，flex-basis设置的宽高的优先级是大于传统的width和height，希望你可以再去看看再来回答。

javasbot commented 1 month ago

flex-basis用于在flex布局时候给定项目的一个初始值， 默认情况下是auto，也就是说根据容器宽度去自动计算，width是给定项目固定宽度。

  1. 当flex布局的主轴是水平方向即flex-direction: row;那么flex-basis设定的就是初始宽度，如果同时存在width，width会覆盖flex-basis属性
  2. 当flex布局的主轴是垂直方向即flex-direction: column;那么flex-basis设定的就是初始高度，如果同时存在height，width会覆盖flex-basis属性; demo示例

说反了，flex-basis优先级更高 Note: In case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority