css 弹性盒子

弹性盒子冲突

• 使用弹性盒子后，float 浮动将会失效，即不能再用 float 来排列
• 当定位为 absolute、fixed 时,flex 会产生冲突失效,解决方式再包一层 div 等

子容器属性

• flex-grow:0；
  • 即父元素有剩余空间,子元素如何分配父元素的剩余空间,默认为0不索取,值越大索取的越厉害，最大值为1.
• flex-shrink:1;
  • 即子元素会超出父元素,子元素如何缩小自己的宽度的,默认为1,值越大缩小越厉害

计算规则:
（1）计算收缩因子与基准值乘的总和：
	var a = 每一项的(flex-shrink * flex-basis)之和.
（2）计算收缩因数：收缩因数 =（项目的收缩因子 * 项目基准值）/ 第一步计算总和：
	var b = (flex-shrink * flex-basis)/a.
（3）每项移除空间的计算：移除空间 = 项目收缩因数 x 溢出的空间（容器大小-项目大小总和） 
	var c =	b * 溢出的空间.
（4）每项伸缩后大小的计算：每项伸缩后大小 = 项目大小 - 移除空间。
	var d = flex-basis - c.

.flex-item-1 {
  flex-basis: 400px;
  flex-shrink: 1;
}

.flex-item-2 {
  flex-basis: 300px;
  flex-shrink: 2;
}

// 假设容器宽度为 500px

1.计算收缩值：
	flex-item-1：flex-shrink: 1 * flex-item-1宽度: 400px = 400
	flex-item-2：flex-shrink: 2 * flex-item-2宽度: 300px = 600
	
2.计算总收缩值：400（收缩值1）+ 600（收缩值2）= 1000

3.计算需要收缩的比例：
	flex-item-1：400 / 1000 = 0.4
	flex-item-2：600 / 1000 = 0.6
	
4.计算父元素总宽度和弹性项总宽度之间的空间差：400px（flex-item-1宽度）+ 300px（flex-item-2宽度）- 500px（容器宽度）= 200px

5.按比例收缩宽度：
	flex-item-1：400px - 200px * 0.4（需要收缩的比例）= 400px - 80px = 320px
	flex-item-2：300px - 200px * 0.6（需要收缩的比例）= 300px - 120px = 180px

• flex-grow：父元素有剩余空间时，子元素分配的权重

计算规则:
（1）可用空间 = （容器大小 - 所有相邻项目flex-basis的总和）。
	var a = 容器大小 - flex-basis和.
（2）可扩展空间 = （可用空间 / 所有相邻项目flex-grow的总和）。
	var b = a / flex-grow和.
（3）每项扩展空间的计算 = （可扩展空间 * 每项flex-grow值）。
	var c = b * flex-grow.
（4）每项伸缩后大小 = （伸缩基准值flex-basis + 每项扩展空间）。
	var d = flex-basis + c.

• flex-basic: n;基准尺寸,水平代替元素的宽度,竖直代替元素的高度,优先级高于设置的width/height,默认为auto

• flex-flow:row-reverse wrap; 是 flex-direction 和 flex-wrap 属性的复合属性。

  • 当容器设置flex-direction为row或row-reverse时,flex-basis和width同时存在,flex-basis优先级高于width,也就是此时flex-basis代替项目的width属性。
  • 当容器设置flex-direction为column或column-reverse时,flex-basis和height同时存在,flex-basis优先级高于height,也就是此时flex-basis代替项目的height属性。
  • 需要注意的是，当flex-basis和width(或height),其中一个属性值为auto时,非auto的优先级更高。

• flex：是flex-grow，flex-shrink, flex-basis的复合属性

  • flex:none; 等同于flex-grow: 0;flex-shrink: 0;flex-basis: auto; auto:拿width或height的值
  • flex:auto; 等同于flex-grow: 1;flex-shrink: 1;flex-basis: auto;
  • flex:1; 默认子元素均匀占据父元素宽度
    等同于:flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
  • flex:n%; 等同于flex-grow: 1; flex-shrink: 1; flex-basis: n%;
  • flex: 2 3; 等同于flex-grow: 2; flex-shrink: 3; flex-basis: 0%;
  • flex:2333 3222px; 等同于flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px;

父容器属性

• 开启弹性盒子

display:flex；  // 在父容器开启，子容器默认在父容器内水平布局
flex-wrap:wrap/wrap-reverse  // 换行
flex-direction:row/column  // 主轴方向

• 设置布局方式

// 竖直布局
flex-direction:column;
// 水平布局
flex-direction:row;


justify-content:flex-start;  // 默认值，位于父容器开头
justify-content:flex-end;  // 位于父容器结尾
justify-content:center;   // 位于父容器中心
justify-content:space-between;  // 每个样式之间留有空白，
justify-content:space-around; 	// 每个样式之前和之间都留有空白
justify-content:baseline;	// 文字基线的对齐方式,取第一个文字基线
flex-flow: wrap; //使得子元素自动拆行


// 设置纵轴方向的布局方式(适合当行元素,即未使用flex-wrap:'wrap'情况下)
align-items:stretch; 默认值，拉伸以适应容器
align-items:center;
align-items:flex-start;
align-items:flex-end;
align-items:baseline

// 设置纵轴多行元素的布局(使用了:flex-wrap:'wrap'多行情况),单行情况下无效
align-content: stretch|center|flex-start|flex-end|space-between|space-around

// 设置子元素布局方式(多行无效)
align-self:center;	// 它覆盖了外部容器规定的align-items属性,同样也只规定在交叉轴上的对齐方式,如果想设置某一个item有不一样的对齐方式的时候,可以用它，默认为auto

baseline对齐方式

flex-direction：

flex-wrap：

弹性盒子缺点

• 浏览器加载内容时，它渐进渲染到了屏幕，即使此时网页的剩余内容还在加载。假设有一个使用弹性盒子（flex-direction: row）实现的三列布局。如果其中两列的内容加载了，浏览器可能会在加载完第三列之前就渲染这两列。然后等到剩余内容加载完，浏览器会重新计算每个弹性子元素的大小，重新渲染网页。用户会短暂地看到两列布局，然后列的大小改变（可能改变特别大），并出现第三列。
  • 对整页布局的时候使用网格布局