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

flex布局：如何将元素智能地固定在底部

flex布局每行显示固定个数

css3语法中Flex布局的基本介绍

flex属性中align-items和align-content有什么区别

html标签div垂直居中的几种方法介绍

标签： flex, flex-basis, flex-grow, flex-shrink

上面是“css3语法flex的三个属性：flex-grow、flex-shrink、flex-basis介绍”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2870.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！