弹性布局是非常常用，且好用的布局方式。这种布局方式可以帮我们处理大部分布局问题。
我们知道，必须给父元素设置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（）也可以做到，此函数可以实现均分，或者按照自己的意愿分配空间。
