CSS常见面试题

flex:1 时 代表哪些css属性

• flex-grow： 控制弹性项目的放大比例。flex-grow的值为一个正整数，表示弹性项目的放大比例。flex: 1; 相当于 flex-grow: 1;。
• flex-shrink：控制弹性项目的收缩比例。flex-shrink的值为一个正整数，表示弹性项目的收缩比例。通常情况下，如果空间不足，各项目将按照其收缩比例进行收缩。flex: 1; 相当于 flex-shrink: 1;。
• flex-basis：设置弹性项目在主轴方向上的初始大小。flex-basis的值可以是长度值（如像素或百分比）或关键字（如 auto）。flex: 1; 相当于 flex-basis: 0;，这表示弹性项目的初始大小为零，即它会占据所有可用空间。

BFC 理解

• Block format context，块级格式化上下文
• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
• 形成 BFC 的常见条件：
  • float 不是 none
  • position 是 absolute或 fixed
  • overflow 不是 visible
  • display 是 flex、block、inline-block、table、table-cell 等