flex: 1 0 auto；和flex：1的效果是一样的吗

最新推荐文章于 2024-07-17 17:33:28 发布

ai_todo

最新推荐文章于 2024-07-17 17:33:28 发布

阅读量423

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_49768044/article/details/132275788

版权

本文比较了CSS属性`flex:1`和`flex:10auto`在弹性布局中的作用，两者都能等分空间，但`flex:1`的子元素会在空间不足时收缩，而`flex:10auto`的子元素则保持原样。通过示例代码展示了两者在实践中的差异。

摘要由CSDN通过智能技术生成

几乎是一样的，但有一个细微的差别。

flex: 1 是一个简写形式，相当于 flex: 1 1 0%。也就是说，flex: 1 表示弹性子元素的伸缩因子为 1，收缩因子也为 1，基准尺寸为 0%。这样设置表示子元素的尺寸会根据可用空间等分分配，但当空间不足时，子元素会收缩以适应。

flex: 1 0 auto 也表示弹性子元素的伸缩因子为 1，收缩因子为 0，基准尺寸为 auto。这样设置同样表示子元素的尺寸会根据可用空间等分分配，但不会收缩以适应。

所以，两者的效果在大多数情况下是相同的，都能让弹性子元素等分剩余空间。主要的区别在于当空间不足时，flex: 1 的子元素会收缩以适应，而 flex: 1 0 auto 的子元素不会收缩。

下面是一个示例代码，展示了 flex: 1 和 flex: 1 0 auto 的不同效果：

<style>
  .container {
    display: flex;
    height: 200px;
    width: 300px;
    background-color: yellowgreen;
  }

  .item {
    border: 1px solid black;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-1-0-auto {
    flex: 1 0 auto;
  }
</style>

<div class="container">
  <div class="item flex-1">Item 1</div>
  <div class="item flex-1">Item 2</div>
  <div class="item flex-1-0-auto">Item 3</div>
</div>

在上面的示例中，.container 是一个固定高度和宽度的弹性容器，.item 是三个弹性子元素。.flex-1 使用了 flex: 1，.flex-1-0-auto 使用了 flex: 1 0 auto。你可以试着调整容器的大小，观察子元素的效果区别。

在这里插入图片描述

flex: 1 0 auto

flex: 1 0 auto 是一个常用的 CSS 属性，在布局中可以用来设置弹性盒子元素的伸缩性。一个弹性盒子可以包含多个弹性子元素，flex: 1 0 auto 用于设置这些子元素的伸缩性。

在这个属性中，1 表示弹性子元素的伸缩因子，表示子元素在空间分配时所占的比例。如果所有的弹性子元素的 flex 值都是 1，它们将等分剩余的空间。如果一个弹性子元素的 flex 值是 2，那么它所占的空间将是 flex 值为 1 的子元素的两倍。

0 表示弹性子元素的收缩因子，表示当剩余空间不够时，弹性子元素是否可以收缩。如果子元素的 flex-shrink 值为 0，表示它不能收缩；如果为 1，表示它可以收缩。

auto 表示弹性子元素的基准尺寸，即子元素在没有设置尺寸时的默认尺寸。

综上，flex: 1 0 auto 的作用是让弹性子元素能够等分剩余的空间，并在空间不足时不收缩。

下面是一个简单的示例代码，展示了如何使用 flex: 1 0 auto 创建一个布局：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      background: rgb(230, 223, 214);
    }
    
    /* flex: 1 0 auto 是一个常用的 CSS 属性，在布局中可以用来设置弹性盒子元素的伸缩性。
       一个弹性盒子可以包含多个弹性子元素，flex: 1 0 auto 用于设置这些子元素的伸缩性。 */
    
    /* 在这个属性中，1 表示弹性子元素的伸缩因子，表示子元素在空间分配时所占的比例。
       如果所有的弹性子元素的 flex 值都是 1，它们将等分剩余的空间。
       如果一个弹性子元素的 flex 值是 2，那么它所占的空间将是 flex 值为 1 的子元素的两倍。 */
    .item {
      /* flex: 1 0 auto; */
      flex: 1;
      border: 1px solid black;
      background-color: bisque;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">
      <div>12</div>
      <div>12</div>
      <div>12</div>
      <div>12</div>
      <div>12</div>
      <div>12</div>
      <div>12</div>
      <div>12</div>
    </div>
    <div class="item">
      <div>22</div>
      <div>22</div>
      <div>22</div>
      <div>22</div>
      <div>22</div>
      <div>22</div>
      <div>22</div>
    </div>
    <div class="item">
      <div>33</div>
      <div>33</div>
      <div>33</div>
      <div>33</div>
      <div>33</div>
      <div>33</div>
      <div>33</div>
    </div>
  </div>
</body>
</html>

在上面的示例中，.container 是一个弹性容器，.item 是三个弹性子元素。这三个子元素使用 flex: 1 0 auto，它们将等分 .container 容器中剩余的空间，并且在空间不足时不收缩。你可以根据自己的需求调整子元素的样式和数量。

在这里插入图片描述

ai_todo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex: 1 0 auto；和flex：1的效果是一样的吗

flex: 1是一个简写形式，相当于。也就是说，flex: 1表示弹性子元素的伸缩因子为 1，收缩因子也为 1，基准尺寸为 0%。这样设置表示子元素的尺寸会根据可用空间等分分配，但当空间不足时，子元素会收缩以适应。也表示弹性子元素的伸缩因子为 1，收缩因子为 0，基准尺寸为 auto。这样设置同样表示子元素的尺寸会根据可用空间等分分配，但不会收缩以适应。所以，两者的效果在大多数情况下是相同的，都能让弹性子元素等分剩余空间。主要的区别在于当空间不足时，flex: 1的子元素会收缩以适应，而的子元素不会收缩。
复制链接

扫一扫