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

css3语法flex的三个属性:flex-growflex-shrinkflex-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介绍”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。

本文标题为:css3语法flex的三个属性:flex-grow、flex-shrink、flex-basis介绍

基础教程推荐