这篇文章主要介绍了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结果相同。