flex:1到底是什么

最新推荐文章于 2024-06-30 11:05:43 发布

weixin_43752765

最新推荐文章于 2024-06-30 11:05:43 发布

阅读量671

点赞数

分类专栏： IT前端学习心得记录

本文链接：https://blog.csdn.net/weixin_43752765/article/details/111994110

版权

IT前端学习心得记录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、子项默认值 `flex: 0 1 auto`，表现如下。

子项宽度和 < 父元素宽时, 不占剩余空间

<body>
  <div class="wrap">
    <div class="lf son">所发生的方式得分</div>
    <div class="rt son">sdfs我是</div>
  </div>
</body>
<style>
  .wrap {
    display: flex;
    border: 5px black solid;
    width: 300px;
  }
  .lf {
    background-color: lightgreen;
  }
  .rt {
    background-color: orange;
  }
</style>

在这里插入图片描述

子项宽度和 > 父元素宽时，在各自原宽度上按1:1系数缩放

<body>
  <div class="wrap">
    <div class="lf son">所发生的方式得分 超长超长超长超长超长超长超长超长</div>
    <div class="rt son">sdfs我是</div>
  </div>
</body>
<style>
  .wrap {
    display: flex;
    border: 5px black solid;
    width: 300px;
  }
  .lf {
    background-color: lightgreen;
  }
  .rt {
    background-color: orange;
  }
</style>