css之flex布局

css之flex布局

问题

当给一个父级盒子设置display:flex后，会让子元素排列成一行，若是不给子元素设置flex: 1，那么有可能会出现有子元素的宽度超出父级元素的宽度

例如

.fu{
	width: 100px;
	
	.zi1{
	width: 20px;
	}
	.zi2{
		.zi2_zi{
			width: 120px;
			white-space: nowrap;
		}
	}
}

这个时候会出现zi2_zi宽度超出fu盒子，这个时候应该给zi2设置flex: 1，overflow: hidden