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-04-21 15:13:15

    redis 简单使用

    Redis和Memcached类似，也属于k-v数据存储 Redis官网 https://redis.io支持更多value类型，除了和string外，还支持hash、lists（链表）、sets（集合）和sorted sets（有序集合） Redis是可以把数据存储在磁盘上的并且使用了两种文件格式：全量数据(RDB)和增量请求(aof)。一般叫做redis持久化 全量数据格式是把内存中的数据写入磁盘，便于下次读取文件进行加载。

  • 2020-04-21 15:14:20

    SpringBoot + Redis：基本配置及使用

    # Redis数据库索引（默认为0） spring.redis.database=0# Redis服务器地址 spring.redis.host=127.0.0.1# Redis服务器连接端口 spring.redis.port=6379# Redis服务器连接密码（默认为空） spring.redis.password=# 连接池最大连接数（使用负值表示没有限制） spring.redis.jedis.pool.max-active=20# 连接池最大阻塞等待时间（使用负值表示没有限制） spring.redis.jedis.pool.max-wait=-1# 连接池中的最大空闲连接 spring.redis.jedis.pool.max-idle=10# 连接池中的最小空闲连接 spring.redis.jedis.pool.min-idle=0# 连接超时时间（毫秒） spring.redis.timeout=1000

  • 2020-04-22 10:49:10

    css按钮特效大全

    打开这个连接，你会发现很多按钮动画脚本，基本这些动画就够大家用的了。

  • 2020-04-27 09:26:49

    transform与transition区别与详解

    对元素进行移动、缩放、转动、拉长或拉伸。 方法：translate(): 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 有两个div，它们的css样式如下，transition:过渡 元素从一种样式逐渐改变为另一种的效果 有一个div，它的css样式如下：

  • 2020-04-27 11:02:21

    CSS 气泡对话框

    点击上面地址，我们可以看到一个灵活的css气泡，拖动按钮，改变气泡效果。