flex弹性布局中的flex：1的理解

小猫娃来啦

已于 2023-03-21 09:39:45 修改

阅读量2k

点赞数 4

分类专栏： css 文章标签： css css3 html

于 2022-11-30 19:04:39 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/128118758

版权

css 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

弹性布局是非常常用，且好用的布局方式。这种布局方式可以帮我们处理大部分布局问题。

我们知道，必须给父元素设置display：flex；使父元素变成弹性容器。然后在父元素的子元素里设置项目属性，才有效果。

关于项目属性，如果深挖，拓展，那么还有一个常用的属性，就是flex：1；

w3c school或者mdn官网上都有介绍到，详情可以去官网查看。我们今天研究这个flex：1到底是怎么回事。

官网说flex：1;实际上相当于是flex：1 1 0；

这三个数字，分别对应三个属性，是一种简写方式，即：flex-grow，flex-shrink，和 flex-basis

而官方定义其表示的含义分别是：

flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

flex-grow属性是处理 flex 元素在主轴上增加空间的问题，相反flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

flex-basis 定义了该元素的空间大小，flex 容器里除了元素所占的空间以外的富余空间就是可用空间 available space。该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。在上面的例子中，所有元素都设定了宽度（width）为 100px，所以 flex-basis 的值为 100px。

言外之意，flex：1操作的是空间，给元素分配空间的办法。

以以下代码为例：

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

       nav div{
           width: 100px;
           height: 100px;
           line-height: 100px;
           background-color: red;
           border: 2px black solid;
           flex:1;
       /*    flex-grow:1;
           flex-shrink:1;
           flex-basis:0; */
       }
       nav{
           color: white;
           font-size: 1.5em;
           text-align: center;
           margin-top: 200px;
           width: 100vw;
           display: flex;
       }
   </style>
</head>

<body>
   <nav>
       <div>猿</div>
       <div>猿</div>
       <div>猿</div>
       <div>猿</div>
       <div>猿</div>

   </nav>
</body>
</html>

我们发现原来给div设置的width：100px；这一属性，无效了。

也就是说，flex：1；会强制均匀分配空间。这是和justify-content属性最大的区别。也弥补了弹性布局的缺点。

有了这个属性后，不管是以元素宽度均分元素，还是给元素均分空间，都得到了实现。当然，也可以使用盒子模型里的margin，padding来实现，但是这样就做不到相应式。在实际开发中，以响应式为标准去完成的项目，更符合用户体验，也是基本要求。关于响应式的布局，其实还有一个属性，那就是css函数calc（）也可以做到，此函数可以实现均分，或者按照自己的意愿分配空间。