<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*父元素属性：
display开启弹性盒子 默认为横向摆放
flex-direction：指定子元素在父类中的摆放位置 row水平，左对齐 row-revrese反转，右对齐column上对齐 column-reverse 反纵向，下对齐
justify-content:上下对齐方式
align-items:左右对齐方式
*/
.songs{
width: 700px;
height: 500px;
background-color: slateblue;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/*子元素属性：
flex-grow/flex:根据比分配空间，其权重 在之后 宽度属性不生效，其优先级高于宽度
*/
.box1{
width: 100px;
height: 100px;
background-color: red;
flex-grow: 1;
}
.box2{
width: 100px;
height: 100px;
background-color:green;
flex-grow: 3;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="songs">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
在父类元素的属性中确定元素的摆放位置
标签：flex,盒子,color,100px,弹性,width,background,对齐,CSS From： https://www.cnblogs.com/songs7/p/17752993.html