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

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

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;
}

以上是编程学习网小编为您介绍的“css3语法flex的三个属性：flex-grow、flex-shrink、flex-basis介绍”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。