您的位置:首页> 前端教程> CSS3教程
文章导航

CSS flex-grow 属性

2019-4-11 02:31| 作者: admin| 查看: 499| 评论: 0|来自: 蚂蚁部落

关于弹性布局的总体介绍可以参阅display:flex 弹性布局一章节。

上面是一篇概括性文章,仅对相关属性进行了基础介绍,细节方面有所欠缺。

本文则通过代码实例详细介绍一下弹性布局中的flex-grow属性。

一.弹性布局概括:

弹性布局的内容较多,相关文章的篇幅通常也很长,从各种角度进行分析,看起来比较复杂。

其实说来说去,就是告诉读者这么一个事情,子项目如何去分配容器的空间。

既然是弹性布局,那么子项目自然可以做到能伸能屈,如此通俗的介绍估计能对理解有所帮助。

二.flex-grow属性:

前面提到过弹性布局就是项目可以做到能伸能屈,此属性就是用来规定项目"伸"。

flex-grow属性定义项目的放大比例,默认为0,也就是不进行放大。

如果容器不存在剩余空间,那么也就无法进行放大操作。

语法结构:

[CSS] 纯文本查看 复制代码
flex-grow: number|initial|inherit;

属性值说明:

(1).number:一个数值,默认为0,用于规定子项目的放大比例,这个比例要和其他项目对比进行确定。

(2).initial:项目以默认方式显示,具体参阅CSS initial 属性一章节。

(3).inherit:从父元素继承该属性。

上述代码都是理论阐述,可能读过之后还是感觉一头雾水,不用担心,后面会有详细的代码实例分析。

三.代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 350px;
  height: 100px;
  background:#ccc;
  display: flex;
}

#main div{flex-basis:50px;}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023317k78imruia8ia6omi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).首先,容器采用display: flex弹性布局,总宽度是350像素。

(2).子项目的基准宽度是50像素,五个子项目总共占据250像素,所以容器还有剩余空间。

(3).默认状态下,flex-grow属性值是0,也就是不放大扩展,上述代码设置每一个子项目的flex-grow属性值为1,也就是它们平均瓜分容器剩余的空间,所以最终结果是五个子项目占据的空间是相同的。

下面再来看一个不是平均分配剩余空间的代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 350px;
  height: 100px;
  background:#ccc;
  display: flex;
}

#main div{flex-basis:50px;}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023348cgjjzdlejj8dj8o2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,第二个div的宽度要明显大于其余div,代码分析如下:

(1).首先,容器采用display: flex弹性布局,总宽度是350像素。

(2).子项目的基准宽度是50像素,五个子项目总共占据250像素,所以容器还有剩余空间。

(3).第二个div的flex-grow属性值为3,其余div的flex-grow属性值为1。

(4).也就是说第二个div瓜分到的剩余空间是其他div的三倍,特别注意的是,不是第二个div的尺寸是其他div的三倍,而是第二个div瓜分到容器剩余空间是其他div的三倍。

占据剩余空间尺寸的计算方式:可以认为将剩余空间划分为(1+3+1+1+1)=7份,每一份的尺寸等于剩余空间/7。

那么每一个div的尺寸就是:

(1).50px+100/7

(2).50px+(100/7)*3

(3).50px+100/7

(4).50px+100/7

(5).50px+100/7

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 350px;
  height: 100px;
  background:#ccc;
  display: flex;
}

#main div{flex-basis:70px;}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023418eab8h2l8hda8ud87.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

虽然设置的瓜分比例不同,但是每一个div的尺寸却是相同的。

因为容器已经没有任何剩余空间了,所以每一个子项目必须各守本分。

还有一个比较极端的情况,那就是不设置子项目的初始宽度,仅设置flex-grow属性。

那么此时各个子项目的尺寸就以flex-grow属性值比例进行划分,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width: 350px;
  height: 100px;
  background:#ccc;
  display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023447wvzuav9g4lwwwwag.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

没有设置初始的宽度,那么各个子项目的尺寸按照flex-grow顺序值比例进行划分。

于是各个div的宽度分别如下:

(1).350*(1/7)

(2).350*(3/7)

(3).350*(1/7)

(4).350*(1/7)

(5).350*(1/7)

非常的简单,不再多介绍,如果有任何问题可以在文章底部留言。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS flex-basis下一篇:CSS flex-direction

最新评论

返回顶部