定制软件开发每日一学—CSS flex-grow 属性

什么是属性❓

flex-grow 定制软件开发属性用于设置或检索弹定制软件开发性盒子的扩展比率。

❗注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

CSS 语法

flex-grow: number|initial|inherit;

属性值

值描述
number 一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

值	描述
*number*	一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

测试代码


<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #000;
  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;">1</div>
  <div style="background-color:lightblue;">3</div>
  <div style="background-color:khaki;">1</div>
  <div style="background-color:pink;">1</div>
  <div style="background-color:lightgrey;">1</div>
</div>
 
</body>
</html>

效果图

关于flex-grow属性的例题

1、flex-grow的作用是（D）

A、 弹性盒子元素对齐方式

B、 弹性盒子元素的排列方式

C、 弹性盒子元素显示次序

D、 弹性盒子元素如何分配剩余空间

定制软件开发每日一学—CSS flex-grow 属性

什么是 属性❓

CSS 语法

属性值

测试代码

效果图

关于flex-grow属性的例题

什么是属性❓