flex对内部元素对影响

transform:scale使用遇到对问题

前言

在使用scale时在元素大小发生变化时，因为大小变了，也会导致位置发生变化。

一、引入transform-origin

transform在进行变化时，默认情况下时按照transform-origin: center center(元素中心)进行变化。
所以要想保证左边位置不变，可以设置为transform-origin: left center.这样就能保证左边位置不变，Y方向的大小以中心点进行变化。

二、scale使用的坑

使用scale可以将元素进行缩放，但是本身大小并没有变，只是看起来大小变成了缩放后的大小。所以可能会超出父盒子的范围。

父元素的样式

.father {
	position: absolute;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	top: 0;
	left: 0;
	width: 40px;
	height: 18px;
	background-color: rgba(0, 0, 0, 0.35);
	border-bottom-right-radius: 2px;
}

子元素的样式

.son {
	 // flex: 0 0 28px; // 设置flex-basis防止外部flex盒子对内部item进行压缩
	 width：28px;
	 height: 24px;
	 line-height: 24px;
	 font-size: 20px;
	 color: #fff;
	 transform: scale(0.5);
	 transform-origin: left center; // 设置缩放原点，左边就不动了
}

这样设置，在布局的时候子元素为28px，已经超出了父元素的大小，由于父元素使用flex，会对子元素进行一定的缩放，保证不会超出去，所以宽度变成了25.6px。。。