CSS中flex和inline"/>
CSS中flex和inline
CSS中flex和inline-flex的区别
起因
display:flex\inline-flex是CSS中弹性布局时，用于容器元素的样式选项。
让人有些糊涂，两者的区别时什么。网上看了一些文章都在扯什么宽度之类的，完全就是胡扯。
还有的写什么“将对象作为弹性伸缩盒显示” “将对象作为内联块级弹性伸缩盒显示”跟绕口令似的。
结论
display:flex和display:inline-flex的共同点是：启用弹性布局。
display:flex和display:inline-flex的区别就是：display:flex容器是一个一般块级元素；display:inline-flex容器则是一个行内块元素。
至于宽高之类的，完全就是块级元素和行内块元素的区别了，一并列一下。
- 块级元素不写宽，默认宽度占满父容器宽度100%
- 块级元素不写高，默认高度靠内容撑起来
- 行内元素设置宽高无效。它的宽高靠内容撑起
- 自带宽高属性的元素，设置宽高有效（img,table）
测试代码
<!DOCTYPE html>
<html><head><style>.container{display:flex;background-color: blue;}.inline-flex-container{display:inline-flex;background-color: gray;height: 200px;}.item{background-color: green;width:100px;height:100px;}</style></head><body><div class="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><span>test1</span><br><hr><div class="inline-flex-container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><span>test2</span></body>
</html>
效果如下
基于上面的测试效果和结论解释就是，当使用display:inline-flex容器被设置为行内块元素，而行内块元素同时兼具了行内元素和块级元素的特性。
综合起来就是：设置宽高有效；如果不设置宽高，宽高靠内容撑起；内容不独占一行。
更多推荐
CSS中flex和inline
发布评论