CSS中flex和inline-flex的区别

CSS中flex和inline-flex的区别

起因

display:flex\inline-flex是CSS中弹性布局时,用于容器元素的样式选项。
让人有些糊涂,两者的区别时什么。网上看了一些文章都在扯什么宽度之类的,完全就是胡扯。
还有的写什么“将对象作为弹性伸缩盒显示” “将对象作为内联块级弹性伸缩盒显示”跟绕口令似的。

结论

display:flexdisplay:inline-flex的共同点是:启用弹性布局。
display:flexdisplay: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>test1span>
        <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>test2span>
    body>
html>

效果如下
CSS中flex和inline-flex的区别_第1张图片
基于上面的测试效果和结论解释就是,当使用display:inline-flex容器被设置为行内块元素,而行内块元素同时兼具了行内元素和块级元素的特性。
综合起来就是:设置宽高有效;如果不设置宽高,宽高靠内容撑起;内容不独占一行。

你可能感兴趣的:(css,前端,正本清源)