flex:1； 到底代表什么

前言：在最初学习flex布局的时候，关于flex: 1;的概念很模糊，只是简单的认为flex: 1; 代表一份； flex: 2;代表两份。。。。后面遇到了关于弹性布局的一系列问题，于是将这个属性好好研究了一下。

其实，flex:1; 是三个属性的简写，完整写法应该是： flex: 1 1 0%;

第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

经常用作自适应布局，内容区会自动放大或缩小占满剩余空间。在chrome浏览器上也可以将flex: 1; 直接展开查看详情

flex: 2;

下面有几个flex布局的常用场景：
1、一个元素宽度（或高度）固定，另一个元素宽度（或高度）自适应。

.parent {
	display: flex;
}
// 高度/宽度固定
.son1 {
	width: 200px; //或者 height: 200px;
	flex: none; // 加不加都可 相当于flex: 0 0 auto;
}
// 高度/宽度自适应
.son2 {
	flex: 1;  // flex: 1 1 0%;
}

2、子元素都设置flex: 1; 子元素盒子会平分并占满父盒子；

<div class="container">
  <div class="div">我是一个div</div>
  <div class="div">我是一个很多字div</div>
  <div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{
  display: flex;
}
.div{
  border: 1px solid red;
  flex: 1;
}
</style>

3、那么如果设置 flex: 1 1 auto;呢？ 子元素盒子会根据自己的内容来适配并一起占满整个空间；

<div class="container">
  <div class="div">我是一个div</div>
  <div class="div">我是一个很多字div</div>
  <div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{
  display: flex;
}
.div{
  border: 1px solid red;
  flex: 1 1 auto;
}
</style>

这篇好文章是转载于：学新通技术网