flex与inline-flex属性的使用详解

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/jiang12138/article/details/100178726

这篇文章主要介绍了flex与inline-flex的一些差别，感兴趣的朋友们可以看一下。

flex：将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联弹性伸缩盒显示

先来看flex：

.contain{
			background: red;
			display: flex;
		}
		.box{
			width:100px;
			height:50px;
			background: green;	
		}

那么结果是什么那？

我们可以看到设置flex后，父元素仍然是一个块级元素。那么如果父元素的宽小于子元素的宽度之和那？

.contain{
			background: red;
			width:400px;
			display: flex;
		}
		.box{
			width:100px;
			height:50px;
			background: green;	
		}
		.box2{
			width:200px;
			background：green;
		}

我们来看一下结果

即使我们设置的子元素的宽度之和超过了父元素的宽度，子元素仍然没有溢出父元素，父元素的宽度仍然是设置的400px，这就是flex的作用，使子元素能够在父元素里弹性的伸缩。

注意不是均分，可以看到，第二个div是其他三个div宽度的二倍。

在子元素的宽度之和大于父元素的情况下，使用弹性布局时，该子元素的实际宽度是(设置的该子元素的宽度/设置的子元素宽度之和)*父元素的宽度。

那么inline-flex又有什么不同那？

让我们回到第一个代码块，把flex改为inline-flex

结果是：

可以看到，与flex的不同是，inline-flex类似于行内元素，但与行内元素不同的是，他可以设置宽度，并且子元素宽度之和大于父元素时，与flex结果相同。