谈谈flex:1的理解

最新推荐文章于 2024-05-12 21:03:21 发布

前端小金丝

最新推荐文章于 2024-05-12 21:03:21 发布

阅读量1.2k

点赞数 1

文章标签：前端 html html5

本文链接：https://blog.csdn.net/ljb376766764/article/details/125974567

版权

首先要知道 flex:1是一个复合属性是 flex-grow,flex-shrink,flex-basis简写

flex-grow:1 表示当父盒子的宽度比所以盒子加在一起的宽度还要大的时候加了flex-grow:1的盒子会自动分配多余的空间。如果给两个及以上的盒子加这个属性那么他们会平分剩余空间。

    <style>
      .context {
        width: 800px;
        height: 300px;
        border: 1px solid blue;
        display: flex;
      }
      .item1 {
        width: 200px;
        height: 300px;
        background-color: pink;
      }
      .item2 {
        width: 200px;
        height: 300px;
        background-color: green;
      }
      .item3 {
        width: 200px;
        height: 300px;
        background-color: red;
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="context">
      <div class="item1"></div>
      <div class="item2"></div>
      <div class="item3"></div>
    </div>
  </body>