flex和inline-flex区别

2021-01-18 15:12:57

参考地址 display:flex和display: inline-flex区别

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

flex

.main{
      background-color: #0f0;
      display: flex;/*父div设置该属性*/
    }               
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }

此时没有为父元素main设置宽度,默认为100%;


inline-flex

//样式.main{
      background-color: #0f0;
      display: inline-flex;/*父div设置该属性*/
    }
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }
    .main div:nth-child(2){
            height:60px;
    }//DOM<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

此处虽然木有给父元素设置宽度,但是父元素默认会根据子元素的宽高去自适应。



  • 2020-01-04 08:14:56

    input上传图片,获取图片上传尺寸

    onchange触发,获取当前file对象(这里可以获取图片的大小、类型、修改时间等) reader去读取文件 塞到页面,获取图片的宽高 移出图片节点

  • 2020-01-04 08:19:28

    flex 布局子内容p元素被撑开

    父元素 flex 布局,子元素有一行文字,将其设置为不换行隐藏后显示省略号,但实际并不是想象的那样,而导致布局变形。改怎么办?

  • 2020-01-04 18:44:26

    vue中computed源码,工作原理

    (Obeject.defineProperty是Object的一个方法,第一个参数是对象名称,第二个参数是要设置的属性名,第三个参数是一个对象,它可以设置这个属性是否可修改、可写等,而这篇文章主要使用的是Obeject.defineProperty的访问器属性,感兴趣的朋友可以自行google或者查看Js高及程序设计)