css3语法flex的三个属性：flex-grow、flex-shrink、flex-basis介绍

css3语法flex的三个属性：flex-grow、flex-shrink、flex-basis应该如何运用，下面web建站小编给大家简单介绍一下！

1、flex-grow

/* 父元素 */
.flex-box{
  display: flex;
  width: 300px;
  height: 300px;
  margin:0 auto;
  background-color: #000;
}
/* 子元素left */
.left{
  ...
  flex-grow: 3;
  ...
}
/* 子元素right */
.right{
  ...
  flex-grow: 1;
  ...
}

2、flex-shrink

/* 父元素 */
.flex-box{
  display: flex;
  width: 300px;
  height: 300px;
  ...
}
/* 子元素left */
.left{
  flex-shrink: 3;
  width: 200px;
  background-color: orange;
}
/* 子元素right */
.right{
  flex-shrink: 1;
  width:200px;
  background-color: cyan;
}

3、flex-basis

.flex-box{
  display: flex;
  width: 300px;
  height: 300px;
  margin:0 auto;
  background-color: #000;
}
 
.left{
  width: 200px;
  flex-basis: 100px;
  background-color: orange;
}
.right{
  width:100px;
  background-color: cyan;
}