详解flex:1属性

kiritomzzz

已于 2024-01-08 10:44:03 修改

阅读量4.6k

点赞数 8

分类专栏：前端文章标签：前端 css

于 2023-10-26 15:03:30 首次发布

本文链接：https://blog.csdn.net/kiritomzzz/article/details/134055659

版权

前端专栏收录该内容

31 篇文章

订阅专栏

flex：1属性是一个简写属性，是以下三个flex-grow、flex-shrink和flex-basis属性的合并写法，下面来分别介绍这三种css属性
flex: 1的作用是同时设置flex-grow: 1、flex-shrink: 1和flex-basis: 0% 全写为flex: 1 1 0% ；
flex: 1 === flex: 1 1 0%

1、flex-grow

flex-grow属性：flex容器有剩余空间时可用，用于分配剩余空间的属性，默认值为0，表示不伸展。
比如：当某个弹性项目的flex-grow属性值为2时，表示该项目的伸展比例是其他flex-grow属性值为1的项目的两倍。这意味着该项目会相对于其他项目获得更多的剩余空间。而flex-grow属性值为0时则默认不伸展。
一个例子：

  <style>
    .flex{
      display: flex;
      width: 800px;
      border: 1px solid red;
    }
    .content{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="flex">
    <div class="content" style="flex-basis: 50%;">1</div>
    <div class="content" style="flex-grow: 0;">2</div>
  </div>
</body>

当2的flex-grow为0时表示不伸展，则2不会拉伸铺满整个容器
flex-grow为0
在这里插入图片描述
当2的flex-grow不为0时，则默认拉伸铺满整个容器
flex-grow为1

2、flex-shrink

flex-shrink属性：flex容器空间不足时可用，默认值为1，代表当项目空间不足时子item等比例收缩，设置为0时则不会收缩，item会超出容器范围

  <style>
    .flex{
      display: flex;
      width: 800px;
      border: 1px solid red;
    }
    .content{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border: 1px solid black;
      flex-shrink: 0;/* flex容器空间不足时可用，默认值为1，代表当项目空间不足时子item等比例收缩，设置为0时则不会收缩，item会超出容器范围 */

    }
  </style>
</head>
<body>
  <div class="flex">
    <div class="content" style="flex-basis: 50%;">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
  </div>
</body>

当子item的flex-shrink为0时，则子item若大于父容器剩余空间，则不会收缩
.content的flex-shrink为0 可见超出容器不收缩
在这里插入图片描述
flex-shrink为1 子item等比例收缩
.content的flex-shrink：1 可见子item平均分配了剩余空间

3、flex-basis

flex-basis属性：想要平均分配item所占空间时可用，或自定义每个item占多少空间。
例子：可定义每个子item占容器多少空间，如有十个item，则比例可定义为百分之10%，平均分配空间

<style>
    .flex{
      display: flex;
      width: 800px;
      border: 1px solid red;
    }
    .content{
      width: 200px;
      height: 200px;
      background-color: skyblue;
      border: 1px solid black;
      flex-basis: 20%；
    }
  </style>
</head>
<body>
  <div class="flex">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
  </div>
</body>