首先 flex 是复合属性，是添加给子元素的

先来看 flex 中的各个参数

• flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
• flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足该项目将缩小
• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（相当于我们设置的width）

flex:1

<style type="text/css">
.wrap {display:flex;}
.box {border:2px solid yellowgreen;flex:1;}
</style>
<div class="wrap">
  <div class="box"><p>网站程序网</p></div>
  <div class="box"><p>高端网站定制</p><p>在目标明确的基础上，完成网站的构思创意即总体设计方案对网站的整体风格和特色作出定位，规划网站的组织结构。</p></div>
  <div class="box"><p>网络营销推广</p><p>网络营销推广是以当今互联网为媒介的一种推广方式，是在网上把自己的产品或者服务利用网络手段与媒介推广出去。网络营销推广使自己的企业能获得更高的利益。</p></div>
  <div class="box"><p>响应式网站</p><p>页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。</p></div>
</div>

flex:auto

<style type="text/css">
.wrap2 {display:flex;}
.box2 {border:2px solid yellowgreen;flex:auto;}
</style>
<div class="wrap2">
  <div class="box2"><p>网站程序网</p></div>
  <div class="box2"><p>高端网站定制</p><p>在目标明确的基础上，完成网站的构思创意即总体设计方案对网站的整体风格和特色作出定位，规划网站的组织结构。</p></div>
  <div class="box2"><p>网络营销推广</p><p>网络营销推广是以当今互联网为媒介的一种推广方式，是在网上把自己的产品或者服务利用网络手段与媒介推广出去。网络营销推广使自己的企业能获得更高的利益。</p></div>
  <div class="box2"><p>响应式网站</p><p>页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。</p></div>
</div>

所以得出结论

flex:1 和 flex:auto 的区别主要是在于 flex-basis

flex:1 不管内容多少，一般都是平分空间，空间大小都一致

而 flex:auto 是根据内容的大小来分，不是平的（除非内容都是一样，才平分）