CSS中display:flex与inline-flex属性的使用方法

今天小编给大家分享的是CSS中display:flex与inline-flex属性的使用方法，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都围栏护栏小微创业公司专业提供企业网站制作营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

Flex介绍

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

flex： 将对象作为弹性伸缩盒显示

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

flex示例代码

    
    
  


  

    
1
    
2
    
3
    
4
  

效果如下：

display:inline-flex示例代码

如果想看到效果，将上面的display:flex,换成display:inline-flex,并且将width:200px删除。在没有测试之前，有的人可能会认为.main会占据整个一行，但是，测试结果是，它会根据子元素所有的div大小自适应宽度和高度

    
    
  


  

    
1
    
2
    
3
    
4
  

效果如下：

以上就是CSS中display:flex与inline-flex属性的使用方法的详细内容了，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎来创新互联行业资讯！

分享名称：CSS中display:flex与inline-flex属性的使用方法
当前地址：http://kswsj.com/article/jsidse.html