display：flex和display: inline-flex区别

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

    效果：没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高度自适应。

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

    效果：未给父元素设置宽高，但是父元素的宽高会跟根据子元素而自适应。高度自适应。


©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • display：flex和display: inline-flex区别
    flex： 将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示 flex 此时没有为...
    _花阅读 67,509评论 0赞 35
  • display:inline-flex的用法
    flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 此时没有为cont...
    程序员三千_阅读 5,857评论 0赞 1
  • 前端布局之Flex语法
    前端布局一直是CSS的一个重点应用，然而基于盒子模型的传统布局方案，依赖display + position + ...
    飞鱼湾阅读 5,111评论 0赞 8
  • CSS Flex
    网页布局（layout）是CSS的一个重点，传统的方式是基于盒子模型，依赖display、position、flo...
    JunChow520阅读 4,799评论 0赞 0
  • Flex布局
    父元素 flex-direction: 主轴方方向 row row-reverse column column-r...
    8d2855a6c5d0阅读 1,157评论 0赞 1