css之Flex弹性布局（子项常见属性）

🎀前言：本篇博客介绍弹性布局flex容器中子项的常见用法

🪀flex:子项目占得份数 （划分不同子项的比例）

【代表占父容器大小的份数】，假设有块大蛋糕，三个人吃,每人各占一份，就是每人吃蛋糕的1/3.

.item1{ //第一人
	flex:1
}
.item2{ //第二人
	flex:1
}
.item3{ //第三人
	flex:1
}
1
2
3
4
5
6
7
8
9

那下面的这种情况，表示第一人 、第二人、第三人分别吃了蛋糕的1/6、2/6、3/6

.item1{ //第一人
	flex:1
}
.item2{ //第二人
	flex:2
}
.item3{ //第三人
	flex:3
}
1
2
3
4
5
6
7
8
9

【注意：我们分配是在剩余空间里面分配】
假设flex容器下有三个div，我们想让第一个盒子、第三个盒子固定，第二个盒子占满剩余空间

🎇align-self 控制单独一个子项在侧轴的排列方式

🧸order属性定义子项的排列顺序